Font Awesome icon in select option
HtmlCssHtml Problem Overview
I try to add a caret down icon to the first selection of several options as shown on the picture below:
here is a Fiddle with 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>
Html Solutions
Solution 1 - Html
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 :
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 Unicode can be found when you click on an icon: Fontawesome
> According to the comment below and issue on Github, the Unicode in select elements won't work on OSX (yet).
Update: from the Github issue, adding multiple attribute to select element makes it work on:
OSX El Capitan 10.11.4
- Chrome version 50.0.2661.75 (64-bit)
- Safari version 9.1
- Firefox version 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>
Solution 2 - Html
Full Sample and newer version: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>
<!-- end snippet -->
Solution 3 - Html
You can't add i tag in option tag because tags are stripped.
But you can add it after the select like this
Solution 4 - Html
I used this solution and it worked with 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.
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:
.fa-select {
font-family: 'Lato', 'Font Awesome 5 Free';
font-weight: 900;
}
Edit: If you are mixing Solid Icons with Brand Icons in the select, change the CSS as follows:
.fa-select {
font-family: 'Lato', 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
}
Solution 5 - Html
In case anybody wants to use the latest Version (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
Index.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>
Solution 6 - Html
I recommend for you to use Jquery plugin selectBoxIt selectBoxIt
It is nice and simple, and you can change the arrow of drop down menu.
Solution 7 - Html
If you want the caret down symbol, remove the "appearence: none" it implies to remove webkit and moz- as well from select in css.
Solution 8 - Html
When using a <select> tag that shows all options, here's a work around using <div> instead:
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
$('#sectionOptionsSelect span').hover(function () {
$(this).css('background', '#c0ec67');
}, function () {
$(this).css('background', 'transparent');
});
$('.removeSection').click(function () {
alert('removeSection');
});
CSS
#sectionOptionsSelect span {
display: block;
}
Solution 9 - Html
Another solution is setting the size attribute on the select box.
Thus taking back control of the styling of the dropdown from the Apple style and displaying Font Awesome Icons correctly.
Solution 10 - Html
if you want to use the icon (v) ,in bootstrap 5 you can use this :
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>