Icono de Font Awesome en la opción de selección
Intento agregar un icono de cursor hacia abajo a la primera selección de varias opciones como se muestra en la siguiente imagen:
aquí hay un violín con mi ejemplo.
No puedo hacer que el ícono sea visible en el violín de arriba.
Y el código correspondiente:
.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>Expandir fragmento
Aceptado
Simplemente puede agregar un ícono de FontAwesome a su menú desplegable de selección como texto. Solo necesitas algunas cosas en CSS, FontAwesome CSS y Unicode. Por ejemplo :
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>Expandir fragmento
violín de trabajo
El Unicode se puede encontrar al hacer clic en un icono: Fontawesome
Según el comentario a continuación y el problema en Github , Unicode en elementos seleccionados no funcionará en OSX (todavía).
Actualización : desde el problema de Github , agregar multipleun atributo al selectelemento hace que funcione en:
OSX El Capitán 10.11.4
- Versión de Chrome 50.0.2661.75 (64 bits)
- Safari versión 9.1
- Versión 45.0.2 de Firefox
Mostrar fragmento de código
JSFiddle
Muestra completa y versión más reciente: 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>Expandir fragmento
No puede agregar ietiqueta dentro de optionetiqueta porque las etiquetas están eliminadas.
Pero puedes agregarlo después de select esto.
En caso de que alguien quiera utilizar la última versión (v5.7.2)
Encuentre mi última versión (inspirada en la respuesta de Victor).
Incluye todos los iconos gratuitos del conjunto "Regular": https://fontawesome.com/icons?d=gallery&s=regular&m=free
índice.html
<head>
...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
...
</head>
CSS:
select {
font-family: 'Lato', 'Font Awesome 5 Free';
font-weight: 900;
}
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>
