Html 选择选项中的字体真棒图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36743041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:09:28 来源:igfitidea点击:
font awesome icon in select option
提问by michltm
I try to add a caret down iconto the first selection of several options as shown on the picture below:
我尝试在几个选项的第一个选择中添加一个插入符号图标，如下图所示：
here is a Fiddlewith my example.
这是我的例子的小提琴。
I can't get the icon to be visible on the Fiddle above.
我无法在上面的小提琴上看到图标。
And the corresponding code:
以及相应的代码：
.wrapper {
height: 200px;
background-color: red;
padding-top: 100px;
padding-left: 150px;
}
#before-select {
font-size: 30px;
color: #ffffff;
}
select {
border: none;
background: transparent;
/*background-color: blue;*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 180px;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
}
select option {
color: #424146;
background: #ffffff;
}<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<div class="wrapper">
<form role="form">
<span id="before-select">in</span>
<select name="town">
<option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i>
</option>
<option value="Paris">Paris</option>
<option value="Madrid">Madrid</option>
</select>
</form>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>采纳答案by Vincent G
回答by Variable
You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :
您可以简单地将 FontAwesome 图标作为文本添加到您的选择下拉列表中。你只需要 CSS 中的一些东西，FontAwesome CSS 和 unicode。例如：
select {
font-family: 'FontAwesome', 'Second Font name'
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
</select>The unicodes can be found when you click on an icon: Fontawesome
单击图标时可以找到unicode：Fontawesome
According to the comment below and issue on Github, the unicode in select elements won't work on OSX (yet).
根据下面的评论和Github 上的问题，select 元素中的 unicode 不适用于 OSX（目前）。
Update: from the Github issue, adding multipleattribute to selectelement makes it work on:
更新：从Github 问题开始，向元素添加multiple属性select使其适用于：
OSX El Capitan 10.11.4
OSX El Capitan 10.11.4
- Chrome version 50.0.2661.75 (64-bit)
- Sarafi version 9.1
- Firefox version 45.0.2
- Chrome 版本 50.0.2661.75（64 位）
- 萨拉菲版本 9.1
- 火狐版 45.0.2
select{
font-family: FontAwesome, sans-serif;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select multiple>
<option> 500px</option>
<option> Adjust</option>
<option> Adn</option>
<option> Align-center</option>
<option> Align-justify</option>
<option> Align-left</option>
<option> Align-right</option>
</select>回答by Victor Grados
Full Sample and newer version:https://codepen.io/Nagibaba/pen/bagEgx
完整示例和更新版本：https: //codepen.io/Nagibaba/pen/bagEgx
select {
font-family: 'FontAwesome', 'sans-serif';
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div>
<select>
<option value="fa-align-left"> fa-align-left</option>
<option value="fa-align-right"> fa-align-right</option>
<option value="fa-amazon"> fa-amazon</option>
<option value="fa-ambulance"> fa-ambulance</option>
<option value="fa-anchor"> fa-anchor</option>
<option value="fa-android"> fa-android</option>
<option value="fa-angellist"> fa-angellist</option>
<option value="fa-angle-double-down"> fa-angle-double-down</option>
<option value="fa-angle-double-left"> fa-angle-double-left</option>
<option value="fa-angle-double-right"> fa-angle-double-right</option>
<option value="fa-angle-double-up"> fa-angle-double-up</option>
<option value="fa-angle-left"> fa-angle-left</option>
<option value="fa-angle-right"> fa-angle-right</option>
<option value="fa-angle-up"> fa-angle-up</option>
<option value="fa-apple"> fa-apple</option>
<option value="fa-archive"> fa-archive</option>
<option value="fa-area-chart"> fa-area-chart</option>
<option value="fa-arrow-circle-down"> fa-arrow-circle-down</option>
<option value="fa-arrow-circle-left"> fa-arrow-circle-left</option>
<option value="fa-arrow-circle-o-down"> fa-arrow-circle-o-down</option>
<option value="fa-arrow-circle-o-left"> fa-arrow-circle-o-left</option>
<option value="fa-arrow-circle-o-right"> fa-arrow-circle-o-right</option>
<option value="fa-arrow-circle-o-up"> fa-arrow-circle-o-up</option>
<option value="fa-arrow-circle-right"> fa-arrow-circle-right</option>
<option value="fa-arrow-circle-up"> fa-arrow-circle-up</option>
<option value="fa-arrow-down"> fa-arrow-down</option>
<option value="fa-arrow-left"> fa-arrow-left</option>
<option value="fa-arrow-right"> fa-arrow-right</option>
<option value="fa-arrow-up"> fa-arrow-up</option>
<option value="fa-arrows"> fa-arrows</option>
<option value="fa-arrows-alt"> fa-arrows-alt</option>
<option value="fa-arrows-h"> fa-arrows-h</option>
<option value="fa-arrows-v"> fa-arrows-v</option>
<option value="fa-asterisk"> fa-asterisk</option>
<option value="fa-at"> fa-at</option>
<option value="fa-automobile"> fa-automobile</option>
<option value="fa-backward"> fa-backward</option>
<option value="fa-balance-scale"> fa-balance-scale</option>
<option value="fa-ban"> fa-ban</option>
<option value="fa-bank"> fa-bank</option>
<option value="fa-bar-chart"> fa-bar-chart</option>
<option value="fa-bar-chart-o"> fa-bar-chart-o</option>
<option value="fa-battery-full"> fa-battery-full</option>
n value="fa-beer"> fa-beer</option>
<option value="fa-behance"> fa-behance</option>
<option value="fa-behance-square"> fa-behance-square</option>
<option value="fa-bell"> fa-bell</option>
<option value="fa-bell-o"> fa-bell-o</option>
<option value="fa-bell-slash"> fa-bell-slash</option>
<option value="fa-bell-slash-o"> fa-bell-slash-o</option>
<option value="fa-bicycle"> fa-bicycle</option>
<option value="fa-binoculars"> fa-binoculars</option>
<option value="fa-birthday-cake"> fa-birthday-cake</option>
<option value="fa-bitbucket"> fa-bitbucket</option>
<option value="fa-bitbucket-square"> fa-bitbucket-square</option>
<option value="fa-bitcoin"> fa-bitcoin</option>
<option value="fa-black-tie"> fa-black-tie</option>
<option value="fa-bold"> fa-bold</option>
<option value="fa-bolt"> fa-bolt</option>
<option value="fa-bomb"> fa-bomb</option>
<option value="fa-book"> fa-book</option>
<option value="fa-bookmark"> fa-bookmark</option>
<option value="fa-bookmark-o"> fa-bookmark-o</option>
<option value="fa-briefcase"> fa-briefcase</option>
<option value="fa-btc"> fa-btc</option>
<option value="fa-bug"> fa-bug</option>
<option value="fa-building"> fa-building</option>
<option value="fa-building-o"> fa-building-o</option>
<option value="fa-bullhorn"> fa-bullhorn</option>
<option value="fa-bullseye"> fa-bullseye</option>
<option value="fa-bus"> fa-bus</option>
<option value="fa-cab"> fa-cab</option>
<option value="fa-calendar"> fa-calendar</option>
<option value="fa-camera"> fa-camera</option>
<option value="fa-car"> fa-car</option>
<option value="fa-caret-up"> fa-caret-up</option>
<option value="fa-cart-plus"> fa-cart-plus</option>
<option value="fa-cc"> fa-cc</option>
<option value="fa-cc-amex"> fa-cc-amex</option>
<option value="fa-cc-jcb"> fa-cc-jcb</option>
<option value="fa-cc-paypal"> fa-cc-paypal</option>
<option value="fa-cc-stripe"> fa-cc-stripe</option>
<option value="fa-cc-visa"> fa-cc-visa</option>
<option value="fa-chain"> fa-chain</option>
<option value="fa-check"> fa-check</option>
<option value="fa-chevron-left"> fa-chevron-left</option>
<option value="fa-chevron-right"> fa-chevron-right</option>
<option value="fa-chevron-up"> fa-chevron-up</option>
<option value="fa-child"> fa-child</option>
<option value="fa-chrome"> fa-chrome</option>
<option value="fa-circle"> fa-circle</option>
<option value="fa-circle-o"> fa-circle-o</option>
<option value="fa-circle-o-notch"> fa-circle-o-notch</option>
<option value="fa-circle-thin"> fa-circle-thin</option>
<option value="fa-clipboard"> fa-clipboard</option>
<option value="fa-clock-o"> fa-clock-o</option>
<option value="fa-clone"> fa-clone</option>
<option value="fa-close"> fa-close</option>
<option value="fa-cloud"> fa-cloud</option>
<option value="fa-cloud-download"> fa-cloud-download</option>
<option value="fa-cloud-upload"> fa-cloud-upload</option>
<option value="fa-cny"> fa-cny</option>
<option value="fa-code"> fa-code</option>
<option value="fa-code-fork"> fa-code-fork</option>
<option value="fa-codepen"> fa-codepen</option>
<option value="fa-coffee"> fa-coffee</option>
<option value="fa-cog"> fa-cog</option>
<option value="fa-cogs"> fa-cogs</option>
<option value="fa-columns"> fa-columns</option>
<option value="fa-comment"> fa-comment</option>
<option value="fa-comment-o"> fa-comment-o</option>
<option value="fa-commenting"> fa-commenting</option>
<option value="fa-commenting-o"> fa-commenting-o</option>
<option value="fa-comments"> fa-comments</option>
<option value="fa-comments-o"> fa-comments-o</option>
<option value="fa-compass"> fa-compass</option>
<option value="fa-compress"> fa-compress</option>
<option value="fa-connectdevelop"> fa-connectdevelop</option>
<option value="fa-contao"> fa-contao</option>
<option value="fa-copy"> fa-copy</option>
<option value="fa-copyright"> fa-copyright</option>
<option value="fa-creative-commons"> fa-creative-commons</option>
<option value="fa-credit-card"> fa-credit-card</option>
<option value="fa-crop"> fa-crop</option>
<option value="fa-crosshairs"> fa-crosshairs</option>
<option value="fa-css3"> fa-css3</option>
<option value="fa-cube"> fa-cube</option>
<option value="fa-cubes"> fa-cubes</option>
<option value="fa-cut"> fa-cut</option>
<option value="fa-cutlery"> fa-cutlery</option>
<option value="fa-dashboard"> fa-dashboard</option>
<option value="fa-dashcube"> fa-dashcube</option>
<option value="fa-database"> fa-database</option>
<option value="fa-dedent"> fa-dedent</option>
<option value="fa-delicious"> fa-delicious</option>
<option value="fa-desktop"> fa-desktop</option>
<option value="fa-deviantart"> fa-deviantart</option>
<option value="fa-diamond"> fa-diamond</option>
<option value="fa-digg"> fa-digg</option>
<option value="fa-dollar"> fa-dollar</option>
<option value="fa-download"> fa-download</option>
<option value="fa-dribbble"> fa-dribbble</option>
<option value="fa-dropbox"> fa-dropbox</option>
<option value="fa-drupal"> fa-drupal</option>
<option value="fa-edit"> fa-edit</option>
<option value="fa-eject"> fa-eject</option>
<option value="fa-ellipsis-h"> fa-ellipsis-h</option>
<option value="fa-ellipsis-v"> fa-ellipsis-v</option>
<option value="fa-empire"> fa-empire</option>
<option value="fa-envelope"> fa-envelope</option>
<option value="fa-envelope-o"> fa-envelope-o</option>
<option value="fa-eur"> fa-eur</option>
<option value="fa-euro"> fa-euro</option>
<option value="fa-exchange"> fa-exchange</option>
<option value="fa-exclamation"> fa-exclamation</option>
<option value="fa-exclamation-circle"> fa-exclamation-circle</option>
<option value="fa-exclamation-triangle"> fa-exclamation-triangle</option>
<option value="fa-expand"> fa-expand</option>
<option value="fa-expeditedssl"> fa-expeditedssl</option>
<option value="fa-external-link"> fa-external-link</option>
<option value="fa-external-link-square"> fa-external-link-square</option>
<option value="fa-eye"> fa-eye</option>
<option value="fa-eye-slash"> fa-eye-slash</option>
<option value="fa-eyedropper"> fa-eyedropper</option>
<option value="fa-facebook"> fa-facebook</option>
<option value="fa-facebook-f"> fa-facebook-f</option>
<option value="fa-facebook-official"> fa-facebook-official</option>
<option value="fa-facebook-square"> fa-facebook-square</option>
<option value="fa-fast-backward"> fa-fast-backward</option>
<option value="fa-fast-forward"> fa-fast-forward</option>
<option value="fa-fax"> fa-fax</option>
<option value="fa-feed"> fa-feed</option>
<option value="fa-female"> fa-female</option>
<option value="fa-fighter-jet"> fa-fighter-jet</option>
<option value="fa-file"> fa-file</option>
<option value="fa-file-archive-o"> fa-file-archive-o</option>
<option value="fa-file-audio-o"> fa-file-audio-o</option>
<option value="fa-file-code-o"> fa-file-code-o</option>
<option value="fa-file-excel-o"> fa-file-excel-o</option>
<option value="fa-file-image-o"> fa-file-image-o</option>
<option value="fa-file-movie-o"> fa-file-movie-o</option>
<option value="fa-file-o"> fa-file-o</option>
<option value="fa-file-pdf-o"> fa-file-pdf-o</option>
<option value="fa-file-photo-o"> fa-file-photo-o</option>
<option value="fa-file-picture-o"> fa-file-picture-o</option>
<option value="fa-file-powerpoint-o"> fa-file-powerpoint-o</option>
<option value="fa-file-sound-o"> fa-file-sound-o</option>
<option value="fa-file-text"> fa-file-text</option>
<option value="fa-file-text-o"> fa-file-text-o</option>
<option value="fa-file-video-o"> fa-file-video-o</option>
<option value="fa-file-word-o"> fa-file-word-o</option>
<option value="fa-file-zip-o"> fa-file-zip-o</option>
<option value="fa-files-o"> fa-files-o</option>
<option value="fa-film"> fa-film</option>
<option value="fa-filter"> fa-filter</option>
<option value="fa-fire"> fa-fire</option>
<option value="fa-fire-extinguisher"> fa-fire-extinguisher</option>
<option value="fa-firefox"> fa-firefox</option>
<option value="fa-flag"> fa-flag</option>
<option value="fa-flag-checkered"> fa-flag-checkered</option>
<option value="fa-flag-o"> fa-flag-o</option>
<option value="fa-flash"> fa-flash</option>
<option value="fa-flask"> fa-flask</option>
<option value="fa-flickr"> fa-flickr</option>
<option value="fa-floppy-o"> fa-floppy-o</option>
<option value="fa-folder"> fa-folder</option>
<option value="fa-folder-o"> fa-folder-o</option>
<option value="fa-folder-open"> fa-folder-open</option>
<option value="fa-folder-open-o"> fa-folder-open-o</option>
<option value="fa-font"> fa-font</option>
<option value="fa-fonticons"> fa-fonticons</option>
<option value="fa-forumbee"> fa-forumbee</option>
<option value="fa-forward"> fa-forward</option>
<option value="fa-foursquare"> fa-foursquare</option>
<option value="fa-frown-o"> fa-frown-o</option>
<option value="fa-futbol-o"> fa-futbol-o</option>
<option value="fa-gamepad"> fa-gamepad</option>
<option value="fa-gavel"> fa-gavel</option>
<option value="fa-gbp"> fa-gbp</option>
<option value="fa-ge"> fa-ge</option>
<option value="fa-gear"> fa-gear</option>
<option value="fa-gears"> fa-gears</option>
<option value="fa-genderless"> fa-genderless</option>
<option value="fa-get-pocket"> fa-get-pocket</option>
<option value="fa-gg"> fa-gg</option>
<option value="fa-gg-circle"> fa-gg-circle</option>
<option value="fa-gift"> fa-gift</option>
<option value="fa-git"> fa-git</option>
<option value="fa-git-square"> fa-git-square</option>
<option value="fa-github"> fa-github</option>
<option value="fa-github-alt"> fa-github-alt</option>
<option value="fa-github-square"> fa-github-square</option>
<option value="fa-gittip"> fa-gittip</option>
<option value="fa-glass"> fa-glass</option>
<option value="fa-globe"> fa-globe</option>
<option value="fa-google"> fa-google</option>
<option value="fa-google-plus"> fa-google-plus</option>
<option value="fa-google-plus-square"> fa-google-plus-square</option>
<option value="fa-google-wallet"> fa-google-wallet</option>
<option value="fa-graduation-cap"> fa-graduation-cap</option>
<option value="fa-gratipay"> fa-gratipay</option>
<option value="fa-group"> fa-group</option>
<option value="fa-h-square"> fa-h-square</option>
<option value="fa-hacker-news"> fa-hacker-news</option>
<option value="fa-hand-grab-o"> fa-hand-grab-o</option>
<option value="fa-hand-lizard-o"> fa-hand-lizard-o</option>
<option value="fa-hand-o-down"> fa-hand-o-down</option>
<option value="fa-hand-o-left"> fa-hand-o-left</option>
<option value="fa-hand-o-right"> fa-hand-o-right</option>
<option value="fa-hand-o-up"> fa-hand-o-up</option>
<option value="fa-hand-paper-o"> fa-hand-paper-o</option>
<option value="fa-hand-peace-o"> fa-hand-peace-o</option>
<option value="fa-hand-pointer-o"> fa-hand-pointer-o</option>
<option value="fa-hand-rock-o"> fa-hand-rock-o</option>
<option value="fa-hand-scissors-o"> fa-hand-scissors-o</option>
<option value="fa-hand-spock-o"> fa-hand-spock-o</option>
<option value="fa-hand-stop-o"> fa-hand-stop-o</option>
<option value="fa-hdd-o"> fa-hdd-o</option>
<option value="fa-header"> fa-header</option>
<option value="fa-headphones"> fa-headphones</option>
<option value="fa-heart"> fa-heart</option>
<option value="fa-heart-o"> fa-heart-o</option>
<option value="fa-heartbeat"> fa-heartbeat</option>
<option value="fa-history"> fa-history</option>
<option value="fa-home"> fa-home</option>
<option value="fa-hospital-o"> fa-hospital-o</option>
<option value="fa-hotel"> fa-hotel</option>
<option value="fa-hourglass"> fa-hourglass</option>
<option value="fa-hourglass-1"> fa-hourglass-1</option>
<option value="fa-hourglass-2"> fa-hourglass-2</option>
<option value="fa-hourglass-3"> fa-hourglass-3</option>
<option value="fa-hourglass-end"> fa-hourglass-end</option>
<option value="fa-hourglass-half"> fa-hourglass-half</option>
<option value="fa-hourglass-o"> fa-hourglass-o</option>
<option value="fa-hourglass-start"> fa-hourglass-start</option>
<option value="fa-houzz"> fa-houzz</option>
<option value="fa-html5"> fa-html5</option>
<option value="fa-i-cursor"> fa-i-cursor</option>
<option value="fa-ils"> fa-ils</option>
<option value="fa-image"> fa-image</option>
<option value="fa-inbox"> fa-inbox</option>
<option value="fa-indent"> fa-indent</option>
<option value="fa-industry"> fa-industry</option>
<option value="fa-info"> fa-info</option>
<option value="fa-info-circle"> fa-info-circle</option>
<option value="fa-inr"> fa-inr</option>
<option value="fa-instagram"> fa-instagram</option>
<option value="fa-institution"> fa-institution</option>
<option value="fa-internet-explorer"> fa-internet-explorer</option>
<option value="fa-intersex"> fa-intersex</option>
<option value="fa-ioxhost"> fa-ioxhost</option>
<option value="fa-italic"> fa-italic</option>
<option value="fa-joomla"> fa-joomla</option>
<option value="fa-jpy"> fa-jpy</option>
<option value="fa-jsfiddle"> fa-jsfiddle</option>
<option value="fa-key"> fa-key</option>
<option value="fa-keyboard-o"> fa-keyboard-o</option>
<option value="fa-krw"> fa-krw</option>
<option value="fa-language"> fa-language</option>
<option value="fa-laptop"> fa-laptop</option>
<option value="fa-lastfm"> fa-lastfm</option>
<option value="fa-lastfm-square"> fa-lastfm-square</option>
<option value="fa-leaf"> fa-leaf</option>
<option value="fa-leanpub"> fa-leanpub</option>
<option value="fa-legal"> fa-legal</option>
<option value="fa-lemon-o"> fa-lemon-o</option>
<option value="fa-level-down"> fa-level-down</option>
<option value="fa-level-up"> fa-level-up</option>
<option value="fa-life-bouy"> fa-life-bouy</option>
<option value="fa-life-buoy"> fa-life-buoy</option>
<option value="fa-life-ring"> fa-life-ring</option>
<option value="fa-life-saver"> fa-life-saver</option>
<option value="fa-lightbulb-o"> fa-lightbulb-o</option>
<option value="fa-line-chart"> fa-line-chart</option>
<option value="fa-link"> fa-link</option>
<option value="fa-linkedin"> fa-linkedin</option>
<option value="fa-linkedin-square"> fa-linkedin-square</option>
<option value="fa-linux"> fa-linux</option>
<option value="fa-list"> fa-list</option>
<option value="fa-list-alt"> fa-list-alt</option>
<option value="fa-list-ol"> fa-list-ol</option>
<option value="fa-list-ul"> fa-list-ul</option>
<option value="fa-location-arrow"> fa-location-arrow</option>
<option value="fa-lock"> fa-lock</option>
<option value="fa-long-arrow-down"> fa-long-arrow-down</option>
<option value="fa-long-arrow-left"> fa-long-arrow-left</option>
<option value="fa-long-arrow-right"> fa-long-arrow-right</option>
<option value="fa-long-arrow-up"> fa-long-arrow-up</option>
<option value="fa-magic"> fa-magic</option>
<option value="fa-magnet"> fa-magnet</option>
<option value="fa-mars-stroke-v"> fa-mars-stroke-v</option>
<option value="fa-maxcdn"> fa-maxcdn</option>
<option value="fa-meanpath"> fa-meanpath</option>
<option value="fa-medium"> fa-medium</option>
<option value="fa-medkit"> fa-medkit</option>
<option value="fa-meh-o"> fa-meh-o</option>
<option value="fa-mercury"> fa-mercury</option>
<option value="fa-microphone"> fa-microphone</option>
<option value="fa-mobile"> fa-mobile</option>
<option value="fa-motorcycle"> fa-motorcycle</option>
<option value="fa-mouse-pointer"> fa-mouse-pointer</option>
<option value="fa-music"> fa-music</option>
<option value="fa-navicon"> fa-navicon</option>
<option value="fa-neuter"> fa-neuter</option>
<option value="fa-newspaper-o"> fa-newspaper-o</option>
<option value="fa-opencart"> fa-opencart</option>
<option value="fa-openid"> fa-openid</option>
<option value="fa-opera"> fa-opera</option>
<option value="fa-outdent"> fa-outdent</option>
<option value="fa-pagelines"> fa-pagelines</option>
<option value="fa-paper-plane-o"> fa-paper-plane-o</option>
<option value="fa-paperclip"> fa-paperclip</option>
<option value="fa-paragraph"> fa-paragraph</option>
<option value="fa-paste"> fa-paste</option>
<option value="fa-pause"> fa-pause</option>
<option value="fa-paw"> fa-paw</option>
<option value="fa-paypal"> fa-paypal</option>
<option value="fa-pencil"> fa-pencil</option>
<option value="fa-pencil-square-o"> fa-pencil-square-o</option>
<option value="fa-phone"> fa-phone</option>
<option value="fa-photo"> fa-photo</option>
<option value="fa-picture-o"> fa-picture-o</option>
<option value="fa-pie-chart"> fa-pie-chart</option>
<option value="fa-pied-piper"> fa-pied-piper</option>
<option value="fa-pied-piper-alt"> fa-pied-piper-alt</option>
<option value="fa-pinterest"> fa-pinterest</option>
<option value="fa-pinterest-p"> fa-pinterest-p</option>
<option value="fa-pinterest-square"> fa-pinterest-square</option>
<option value="fa-plane"> fa-plane</option>
<option value="fa-play"> fa-play</option>
<option value="fa-play-circle"> fa-play-circle</option>
<option value="fa-play-circle-o"> fa-play-circle-o</option>
<option value="fa-plug"> fa-plug</option>
<option value="fa-plus"> fa-plus</option>
<option value="fa-plus-circle"> fa-plus-circle</option>
<option value="fa-plus-square"> fa-plus-square</option>
<option value="fa-plus-square-o"> fa-plus-square-o</option>
<option value="fa-power-off"> fa-power-off</option>
<option value="fa-print"> fa-print</option>
<option value="fa-puzzle-piece"> fa-puzzle-piece</option>
<option value="fa-qq"> fa-qq</option>
<option value="fa-qrcode"> fa-qrcode</option>
<option value="fa-question"> fa-question</option>
<option value="fa-question-circle"> fa-question-circle</option>
<option value="fa-quote-left"> fa-quote-left</option>
<option value="fa-quote-right"> fa-quote-right</option>
<option value="fa-ra"> fa-ra</option>
<option value="fa-random"> fa-random</option>
<option value="fa-rebel"> fa-rebel</option>
<option value="fa-recycle"> fa-recycle</option>
<option value="fa-reddit"> fa-reddit</option>
<option value="fa-reddit-square"> fa-reddit-square</option>
<option value="fa-refresh"> fa-refresh</option>
<option value="fa-registered"> fa-registered</option>
<option value="fa-remove"> fa-remove</option>
<option value="fa-renren"> fa-renren</option>
<option value="fa-reorder"> fa-reorder</option>
<option value="fa-repeat"> fa-repeat</option>
<option value="fa-reply"> fa-reply</option>
<option value="fa-reply-all"> fa-reply-all</option>
<option value="fa-retweet"> fa-retweet</option>
<option value="fa-rmb"> fa-rmb</option>
<option value="fa-road"> fa-road</option>
<option value="fa-rocket"> fa-rocket</option>
<option value="fa-rotate-left"> fa-rotate-left</option>
<option value="fa-rotate-right"> fa-rotate-right</option>
<option value="fa-rouble"> fa-rouble</option>
<option value="fa-rss"> fa-rss</option>
<option value="fa-rss-square"> fa-rss-square</option>
<option value="fa-rub"> fa-rub</option>
<option value="fa-ruble"> fa-ruble</option>
<option value="fa-rupee"> fa-rupee</option>
<option value="fa-safari"> fa-safari</option>
<option value="fa-sliders"> fa-sliders</option>
<option value="fa-slideshare"> fa-slideshare</option>
<option value="fa-smile-o"> fa-smile-o</option>
<option value="fa-sort-asc"> fa-sort-asc</option>
<option value="fa-sort-desc"> fa-sort-desc</option>
<option value="fa-sort-down"> fa-sort-down</option>
<option value="fa-spinner"> fa-spinner</option>
<option value="fa-spoon"> fa-spoon</option>
<option value="fa-spotify"> fa-spotify</option>
<option value="fa-square"> fa-square</option>
<option value="fa-square-o"> fa-square-o</option>
<option value="fa-star"> fa-star</option>
<option value="fa-star-half"> fa-star-half</option>
<option value="fa-stop"> fa-stop</option>
<option value="fa-subscript"> fa-subscript</option>
<option value="fa-tablet"> fa-tablet</option>
<option value="fa-tachometer"> fa-tachometer</option>
<option value="fa-tag"> fa-tag</option>
<option value="fa-tags"> fa-tags</option>
</select>
</div>回答by Kaiser
I used this solution and it worked with Font Awesome 5: https://stackoverflow.com/a/50973559/3813846
我使用了这个解决方案，它与 Font Awesome 5 一起使用：https: //stackoverflow.com/a/50973559/3813846
What made the difference in my case was to add font-weight: 900;to the class. Keep in mind to 'fa' to the value.
使我的情况有所不同的是添加font-weight: 900;到类中。请记住“fa”的值。
Example of my code:
我的代码示例：
<select class="text-primary fa-select" name="class_logo" required>
<option value="fa address-book"> address-book</option>
<option value="fa adjust"> adjust</option>
<option value="fa air-freshener"> air-freshener</option>
</select>
CSS:
CSS:
.fa-select {
font-family: 'Lato', 'Font Awesome 5 Free';
font-weight: 900;
}
Edit: If you are mixing Solid Iconswith Brand Iconsin the select, change the CSSas follows:
编辑：如果您在选择中混合实体图标和品牌图标，请按如下方式更改CSS：
.fa-select {
font-family: 'Lato', 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
}
回答by Gary Klasen
In case anybody wants to use the latest Version (v5.7.2)
如果有人想使用最新版本 (v5.7.2)
Please find my latest version (inspired by Victors answer).
请找到我的最新版本（受维克多回答的启发）。
It includes all Free Icons of the "Regular"-Set: https://fontawesome.com/icons?d=gallery&s=regular&m=free
它包括“常规”集的所有免费图标：https://fontawesome.com/icons ?d =gallery &s =regular&m =free
Index.html
索引.html
<head>
...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
...
</head>
CSS:
CSS：
select {
font-family: 'Lato', 'Font Awesome 5 Free';
font-weight: 900;
}
HTML:
HTML：
<select id="icon">
<option value="address-book"> address-book</option>
<option value="address-card"> address-card</option>
<option value="angry"> angry</option>
<option value="arrow-alt-circle-down"> arrow-alt-circle-down</option>
<option value="arrow-alt-circle-left"> arrow-alt-circle-left</option>
<option value="arrow-alt-circle-right"> arrow-alt-circle-right</option>
<option value="arrow-alt-circle-up"> arrow-alt-circle-up</option>
<option value="bell"> bell</option>
<option value="bell-slash"> bell-slash</option>
<option value="bookmark"> bookmark</option>
<option value="building"> building</option>
<option value="calendar"> calendar</option>
<option value="calendar-alt"> calendar-alt</option>
<option value="calendar-check"> calendar-check</option>
<option value="calendar-minus"> calendar-minus</option>
<option value="calendar-plus"> calendar-plus</option>
<option value="calendar-times"> calendar-times</option>
<option value="caret-square-down"> caret-square-down</option>
<option value="caret-square-left"> caret-square-left</option>
<option value="caret-square-right"> caret-square-right</option>
<option value="caret-square-up"> caret-square-up</option>
<option value="chart-bar"> chart-bar</option>
<option value="check-circle"> check-circle</option>
<option value="check-square"> check-square</option>
<option value="circle"> circle</option>
<option value="clipboard"> clipboard</option>
<option value="clock"> clock</option>
<option value="clone"> clone</option>
<option value="closed-captioning"> closed-captioning</option>
<option value="comment"> comment</option>
<option value="comment-alt"> comment-alt</option>
<option value="comment-dots"> comment-dots</option>
<option value="comments"> comments</option>
<option value="compass"> compass</option>
<option value="copy"> copy</option>
<option value="copyright"> copyright</option>
<option value="credit-card"> credit-card</option>
<option value="dizzy"> dizzy</option>
<option value="dot-circle"> dot-circle</option>
<option value="edit"> edit</option>
<option value="envelope">󴃠 envelope </option>
<option value="envelope-open"> envelope-open</option>
<option value="eye"> eye</option>
<option value="eye-slash"> eye-slash</option>
<option value="file"> file</option>
<option value="file-alt"> file-alt</option>
<option value="file-archive"> file-archive</option>
<option value="file-audio"> file-audio</option>
<option value="file-code"> file-code</option>
<option value="file-excel"> file-excel </option>
<option value="file-image"> file-image</option>
<option value="file-pdf"> file-pdf</option>
<option value="file-powerpoint"> file-powerpoint</option>
<option value="file-video"> file-video</option>
<option value="file-word"> file-word</option>
<option value="flag"> flag</option>
<option value="flushed"> flushed</option>
<option value="folder"> folder</option>
<option value="folder-open"> folder-open </option>
<option value="frown"> frown</option>
<option value="frown-open"> frown-open</option>
<option value="futbol"> futbol</option>
<option value="gem"> gem</option>
<option value="grimace"> grimace</option>
<option value="grin"> grin</option>
<option value="grin-alt"> grin-alt</option>
<option value="grin-beam"> grin-beam</option>
<option value="grin-beam-sweet"> grin-beam-sweet </option>
<option value="grin-hearts"> grin-hearts</option>
<option value="grin-squint"> grin-squint</option>
<option value="grin-squint-tears"> grin-squint-tears</option>
<option value="grin-stars"> grin-stars</option>
<option value="grin-tears"> grin-tears</option>
<option value="grin-tongue"> grin-tongue</option>
<option value="grin-tongue-squint"> grin-tongue-squint</option>
<option value="grin-tongue-wink"> grin-tongue-wink</option>
<option value="grin-wink"> grin-wink </option>
<option value="hand-lizard"> hand-lizard</option>
<option value="hand-paper"> hand-paper</option>
<option value="hand-peace"> hand-peace</option>
<option value="hand-point-down"> hand-point-down</option>
<option value="hand-point-left"> hand-point-left</option>
<option value="hand-point-right"> hand-point-right</option>
<option value="hand-point-up"> hand-point-up</option>
<option value="hand-pointer"> hand-pointer</option>
<option value="hand-rock"> hand-rock </option>
<option value="hand-scissors"> hand-scissors</option>
<option value="hand-spock"> hand-spock</option>
<option value="handshake"> handshake</option>
<option value="hdd"> hdd</option>
<option value="heart"> heart</option>
<option value="home"> home</option>
<option value="hospital"> hospital</option>
<option value="hourglass"> hourglass</option>
<option value="id-badge"> id-badge</option>
<option value="id-card"> id-card </option>
<option value="image"> image</option>
<option value="images"> images</option>
<option value="keyboard"> keyboard</option>
<option value="kiss"> kiss</option>
<option value="kiss-beam"> kiss-beam</option>
<option value="kiss-wink-heart"> kiss-wink-heart</option>
<option value="laugh"> laugh</option>
<option value="laugh-beam"> laugh-beam</option>
<option value="laugh-squint"> laugh-squint </option>
<option value="laugh-wink"> laugh-wink</option>
<option value="lemon"> lemon</option>
<option value="life-ring"> life-ring</option>
<option value="lightbulb"> lightbulb</option>
<option value="list-alt"> list-alt</option>
<option value="map"> map</option>
<option value="meh"> meh</option>
<option value="meh-blank"> meh-blank</option>
<option value="meh-rolling-eyes"> meh-rolling-eyes </option>
<option value="minus-square"> minus-square</option>
<option value="money-bill-alt"> money-bill-alt</option>
<option value="moon"> moon</option>
<option value="newspaper"> newspaper</option>
<option value="object-group"> object-group</option>
<option value="object-upgroup"> object-upgroup</option>
<option value="paper-plane"> paper-plane</option>
<option value="pause-circle"> pause-circle</option>
<option value="play-circle"> play-circle </option>
<option value="plus-square"> plus-square</option>
<option value="question-circle"> question-circle</option>
<option value="registered"> registered</option>
<option value="sad-cry"> sad-cry</option>
<option value="sad-tear"> sad-tear</option>
<option value="save"> save</option>
<option value="share-square"> share-square</option>
<option value="smile"> smile</option>
<option value="smile-beam"> smile-beam </option>
<option value="smile-wink"> smile-wink</option>
<option value="snowflake"> snowflake</option>
<option value="square"> square</option>
<option value="star"> star</option>
<option value="star-half"> star-half</option>
<option value="sticky-note"> sticky-note</option>
<option value="stop-circle"> stop-circle</option>
<option value="sun"> sun</option>
<option value="surprise"> surprise </option>
<option value="thumbs-down"> thumbs-down</option>
<option value="thumbs-up">󱅤 thumbs-up</option>
<option value="times-circle"> times-circle</option>
<option value="tired"> tired</option>
<option value="trash-alt"> trash-alt</option>
<option value="user"> user</option>
<option value="user-circle"> user-circle</option>
<option value="window-close"> window-close</option>
<option value="window-maximize"> window-maximize </option>
<option value="window-minimize"> window-minimize</option>
<option value="window-restore"> window-restore</option>
</select>
回答by Ahmed Al Bermawy
I recommend for you to use Jquery plugin selectBoxIt selectBoxIt
我推荐你使用 Jquery 插件 selectBoxIt selectBoxIt
It is nice and simple, and you can change the arrow of drop down menu.
它既漂亮又简单，您可以更改下拉菜单的箭头。
回答by Gene Bo
When using a <select>tag that shows all options, here's a work around using <div>instead:
当使用<select>显示所有选项的标签时，这里有一个解决方法<div>：
HTML
HTML
<div id='sectionOptionsSelect' size='5' class='block1'
style='visibility: hidden; border: 1px solid gray; padding: 5px; '>
<span class='addPageBreakAbove'>Add Page Break Above</span>
<span class='addPageBreakBelow'>Add Page Break Below</span>
<span class='removeSection'>
<label class='fa fa-window-close'
style='font-size: 25px; color: red; background: white; '></label>
Remove Section</span>
</div>
Supporting JS
支持JS
$('#sectionOptionsSelect span').hover(function () {
$(this).css('background', '#c0ec67');
}, function () {
$(this).css('background', 'transparent');
});
$('.removeSection').click(function () {
alert('removeSection');
});
CSS
CSS
#sectionOptionsSelect span {
display: block;
}
回答by Andrew Fraser
Another solution is setting the sizeattribute on the select box.
另一种解决方案是在选择框上设置大小属性。
Thus taking back control of the styling of the dropdown from the Apple style and displaying Font Awesome Icons correctly.
从而从 Apple 样式中收回对下拉列表样式的控制并正确显示 Font Awesome Icons。
回答by Sheetal Shetty
If you want the caret down symbol, remove the "appearence: none" it implies to remove webkit and moz- as well from select in css.
如果您想要插入符号，请删除“外观：无”，它意味着从 css 中的 select 中删除 webkit 和 moz- 。
