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:
_x000D_
_x000D_
_x000D_
_x000D_
.wrapper {_x000D_
height: 200px;_x000D_
background-color: red;_x000D_
padding-top: 100px;_x000D_
padding-left: 150px;_x000D_
}_x000D_
#before-select {_x000D_
font-size: 30px;_x000D_
color: #ffffff;_x000D_
}_x000D_
select {_x000D_
border: none;_x000D_
background: transparent;_x000D_
/*background-color: blue;*/_x000D_
-webkit-appearance: none;_x000D_
-moz-appearance: none;_x000D_
appearance: none;_x000D_
width: 180px;_x000D_
padding-top: 0px;_x000D_
background-size: 20px;_x000D_
color: #ffffff;_x000D_
font-size: 30px;_x000D_
}_x000D_
select option {_x000D_
color: #424146;_x000D_
background: #ffffff;_x000D_
}<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />_x000D_
_x000D_
<div class="wrapper">_x000D_
_x000D_
<form role="form">_x000D_
<span id="before-select">in</span>_x000D_
_x000D_
<select name="town">_x000D_
<option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i>_x000D_
</option>_x000D_
<option value="Paris">Paris</option>_x000D_
<option value="Madrid">Madrid</option>_x000D_
</select>_x000D_
_x000D_
_x000D_
</form>_x000D_
_x000D_
_x000D_
</div>_x000D_
_x000D_
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>_x000D_
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>The answer is
Full Sample and newer version:https://codepen.io/Nagibaba/pen/bagEgx
_x000D_
_x000D_
select {_x000D_
font-family: 'FontAwesome', 'sans-serif';_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />_x000D_
<div>_x000D_
<select>_x000D_
<option value="fa-align-left"> fa-align-left</option>_x000D_
<option value="fa-align-right"> fa-align-right</option>_x000D_
<option value="fa-amazon"> fa-amazon</option>_x000D_
<option value="fa-ambulance"> fa-ambulance</option>_x000D_
<option value="fa-anchor"> fa-anchor</option>_x000D_
<option value="fa-android"> fa-android</option>_x000D_
<option value="fa-angellist"> fa-angellist</option>_x000D_
<option value="fa-angle-double-down"> fa-angle-double-down</option>_x000D_
<option value="fa-angle-double-left"> fa-angle-double-left</option>_x000D_
<option value="fa-angle-double-right"> fa-angle-double-right</option>_x000D_
<option value="fa-angle-double-up"> fa-angle-double-up</option>_x000D_
_x000D_
<option value="fa-angle-left"> fa-angle-left</option>_x000D_
<option value="fa-angle-right"> fa-angle-right</option>_x000D_
<option value="fa-angle-up"> fa-angle-up</option>_x000D_
<option value="fa-apple"> fa-apple</option>_x000D_
<option value="fa-archive"> fa-archive</option>_x000D_
<option value="fa-area-chart"> fa-area-chart</option>_x000D_
<option value="fa-arrow-circle-down"> fa-arrow-circle-down</option>_x000D_
<option value="fa-arrow-circle-left"> fa-arrow-circle-left</option>_x000D_
<option value="fa-arrow-circle-o-down"> fa-arrow-circle-o-down</option>_x000D_
<option value="fa-arrow-circle-o-left"> fa-arrow-circle-o-left</option>_x000D_
<option value="fa-arrow-circle-o-right"> fa-arrow-circle-o-right</option>_x000D_
<option value="fa-arrow-circle-o-up"> fa-arrow-circle-o-up</option>_x000D_
<option value="fa-arrow-circle-right"> fa-arrow-circle-right</option>_x000D_
<option value="fa-arrow-circle-up"> fa-arrow-circle-up</option>_x000D_
<option value="fa-arrow-down"> fa-arrow-down</option>_x000D_
<option value="fa-arrow-left"> fa-arrow-left</option>_x000D_
<option value="fa-arrow-right"> fa-arrow-right</option>_x000D_
<option value="fa-arrow-up"> fa-arrow-up</option>_x000D_
<option value="fa-arrows"> fa-arrows</option>_x000D_
<option value="fa-arrows-alt"> fa-arrows-alt</option>_x000D_
<option value="fa-arrows-h"> fa-arrows-h</option>_x000D_
<option value="fa-arrows-v"> fa-arrows-v</option>_x000D_
<option value="fa-asterisk"> fa-asterisk</option>_x000D_
<option value="fa-at"> fa-at</option>_x000D_
<option value="fa-automobile"> fa-automobile</option>_x000D_
<option value="fa-backward"> fa-backward</option>_x000D_
<option value="fa-balance-scale"> fa-balance-scale</option>_x000D_
<option value="fa-ban"> fa-ban</option>_x000D_
<option value="fa-bank"> fa-bank</option>_x000D_
<option value="fa-bar-chart"> fa-bar-chart</option>_x000D_
<option value="fa-bar-chart-o"> fa-bar-chart-o</option>_x000D_
_x000D_
<option value="fa-battery-full"> fa-battery-full</option>_x000D_
n value="fa-beer"> fa-beer</option>_x000D_
<option value="fa-behance"> fa-behance</option>_x000D_
<option value="fa-behance-square"> fa-behance-square</option>_x000D_
<option value="fa-bell"> fa-bell</option>_x000D_
<option value="fa-bell-o"> fa-bell-o</option>_x000D_
<option value="fa-bell-slash"> fa-bell-slash</option>_x000D_
<option value="fa-bell-slash-o"> fa-bell-slash-o</option>_x000D_
<option value="fa-bicycle"> fa-bicycle</option>_x000D_
<option value="fa-binoculars"> fa-binoculars</option>_x000D_
<option value="fa-birthday-cake"> fa-birthday-cake</option>_x000D_
<option value="fa-bitbucket"> fa-bitbucket</option>_x000D_
<option value="fa-bitbucket-square"> fa-bitbucket-square</option>_x000D_
<option value="fa-bitcoin"> fa-bitcoin</option>_x000D_
<option value="fa-black-tie"> fa-black-tie</option>_x000D_
<option value="fa-bold"> fa-bold</option>_x000D_
<option value="fa-bolt"> fa-bolt</option>_x000D_
<option value="fa-bomb"> fa-bomb</option>_x000D_
<option value="fa-book"> fa-book</option>_x000D_
<option value="fa-bookmark"> fa-bookmark</option>_x000D_
<option value="fa-bookmark-o"> fa-bookmark-o</option>_x000D_
<option value="fa-briefcase"> fa-briefcase</option>_x000D_
<option value="fa-btc"> fa-btc</option>_x000D_
<option value="fa-bug"> fa-bug</option>_x000D_
<option value="fa-building"> fa-building</option>_x000D_
<option value="fa-building-o"> fa-building-o</option>_x000D_
<option value="fa-bullhorn"> fa-bullhorn</option>_x000D_
<option value="fa-bullseye"> fa-bullseye</option>_x000D_
<option value="fa-bus"> fa-bus</option>_x000D_
<option value="fa-cab"> fa-cab</option>_x000D_
<option value="fa-calendar"> fa-calendar</option>_x000D_
<option value="fa-camera"> fa-camera</option>_x000D_
<option value="fa-car"> fa-car</option>_x000D_
<option value="fa-caret-up"> fa-caret-up</option>_x000D_
<option value="fa-cart-plus"> fa-cart-plus</option>_x000D_
<option value="fa-cc"> fa-cc</option>_x000D_
<option value="fa-cc-amex"> fa-cc-amex</option>_x000D_
<option value="fa-cc-jcb"> fa-cc-jcb</option>_x000D_
<option value="fa-cc-paypal"> fa-cc-paypal</option>_x000D_
<option value="fa-cc-stripe"> fa-cc-stripe</option>_x000D_
<option value="fa-cc-visa"> fa-cc-visa</option>_x000D_
<option value="fa-chain"> fa-chain</option>_x000D_
<option value="fa-check"> fa-check</option>_x000D_
<option value="fa-chevron-left"> fa-chevron-left</option>_x000D_
<option value="fa-chevron-right"> fa-chevron-right</option>_x000D_
<option value="fa-chevron-up"> fa-chevron-up</option>_x000D_
<option value="fa-child"> fa-child</option>_x000D_
<option value="fa-chrome"> fa-chrome</option>_x000D_
<option value="fa-circle"> fa-circle</option>_x000D_
<option value="fa-circle-o"> fa-circle-o</option>_x000D_
<option value="fa-circle-o-notch"> fa-circle-o-notch</option>_x000D_
<option value="fa-circle-thin"> fa-circle-thin</option>_x000D_
<option value="fa-clipboard"> fa-clipboard</option>_x000D_
<option value="fa-clock-o"> fa-clock-o</option>_x000D_
<option value="fa-clone"> fa-clone</option>_x000D_
<option value="fa-close"> fa-close</option>_x000D_
<option value="fa-cloud"> fa-cloud</option>_x000D_
<option value="fa-cloud-download"> fa-cloud-download</option>_x000D_
<option value="fa-cloud-upload"> fa-cloud-upload</option>_x000D_
<option value="fa-cny"> fa-cny</option>_x000D_
<option value="fa-code"> fa-code</option>_x000D_
<option value="fa-code-fork"> fa-code-fork</option>_x000D_
<option value="fa-codepen"> fa-codepen</option>_x000D_
<option value="fa-coffee"> fa-coffee</option>_x000D_
<option value="fa-cog"> fa-cog</option>_x000D_
<option value="fa-cogs"> fa-cogs</option>_x000D_
<option value="fa-columns"> fa-columns</option>_x000D_
<option value="fa-comment"> fa-comment</option>_x000D_
<option value="fa-comment-o"> fa-comment-o</option>_x000D_
<option value="fa-commenting"> fa-commenting</option>_x000D_
<option value="fa-commenting-o"> fa-commenting-o</option>_x000D_
<option value="fa-comments"> fa-comments</option>_x000D_
<option value="fa-comments-o"> fa-comments-o</option>_x000D_
<option value="fa-compass"> fa-compass</option>_x000D_
<option value="fa-compress"> fa-compress</option>_x000D_
<option value="fa-connectdevelop"> fa-connectdevelop</option>_x000D_
<option value="fa-contao"> fa-contao</option>_x000D_
<option value="fa-copy"> fa-copy</option>_x000D_
<option value="fa-copyright"> fa-copyright</option>_x000D_
<option value="fa-creative-commons"> fa-creative-commons</option>_x000D_
<option value="fa-credit-card"> fa-credit-card</option>_x000D_
<option value="fa-crop"> fa-crop</option>_x000D_
<option value="fa-crosshairs"> fa-crosshairs</option>_x000D_
<option value="fa-css3"> fa-css3</option>_x000D_
<option value="fa-cube"> fa-cube</option>_x000D_
<option value="fa-cubes"> fa-cubes</option>_x000D_
<option value="fa-cut"> fa-cut</option>_x000D_
<option value="fa-cutlery"> fa-cutlery</option>_x000D_
<option value="fa-dashboard"> fa-dashboard</option>_x000D_
<option value="fa-dashcube"> fa-dashcube</option>_x000D_
<option value="fa-database"> fa-database</option>_x000D_
<option value="fa-dedent"> fa-dedent</option>_x000D_
<option value="fa-delicious"> fa-delicious</option>_x000D_
<option value="fa-desktop"> fa-desktop</option>_x000D_
<option value="fa-deviantart"> fa-deviantart</option>_x000D_
<option value="fa-diamond"> fa-diamond</option>_x000D_
<option value="fa-digg"> fa-digg</option>_x000D_
<option value="fa-dollar"> fa-dollar</option>_x000D_
<option value="fa-download"> fa-download</option>_x000D_
<option value="fa-dribbble"> fa-dribbble</option>_x000D_
<option value="fa-dropbox"> fa-dropbox</option>_x000D_
<option value="fa-drupal"> fa-drupal</option>_x000D_
<option value="fa-edit"> fa-edit</option>_x000D_
<option value="fa-eject"> fa-eject</option>_x000D_
<option value="fa-ellipsis-h"> fa-ellipsis-h</option>_x000D_
<option value="fa-ellipsis-v"> fa-ellipsis-v</option>_x000D_
<option value="fa-empire"> fa-empire</option>_x000D_
<option value="fa-envelope"> fa-envelope</option>_x000D_
<option value="fa-envelope-o"> fa-envelope-o</option>_x000D_
<option value="fa-eur"> fa-eur</option>_x000D_
<option value="fa-euro"> fa-euro</option>_x000D_
<option value="fa-exchange"> fa-exchange</option>_x000D_
<option value="fa-exclamation"> fa-exclamation</option>_x000D_
<option value="fa-exclamation-circle"> fa-exclamation-circle</option>_x000D_
<option value="fa-exclamation-triangle"> fa-exclamation-triangle</option>_x000D_
<option value="fa-expand"> fa-expand</option>_x000D_
<option value="fa-expeditedssl"> fa-expeditedssl</option>_x000D_
<option value="fa-external-link"> fa-external-link</option>_x000D_
<option value="fa-external-link-square"> fa-external-link-square</option>_x000D_
<option value="fa-eye"> fa-eye</option>_x000D_
<option value="fa-eye-slash"> fa-eye-slash</option>_x000D_
<option value="fa-eyedropper"> fa-eyedropper</option>_x000D_
<option value="fa-facebook"> fa-facebook</option>_x000D_
<option value="fa-facebook-f"> fa-facebook-f</option>_x000D_
<option value="fa-facebook-official"> fa-facebook-official</option>_x000D_
<option value="fa-facebook-square"> fa-facebook-square</option>_x000D_
<option value="fa-fast-backward"> fa-fast-backward</option>_x000D_
<option value="fa-fast-forward"> fa-fast-forward</option>_x000D_
<option value="fa-fax"> fa-fax</option>_x000D_
<option value="fa-feed"> fa-feed</option>_x000D_
<option value="fa-female"> fa-female</option>_x000D_
<option value="fa-fighter-jet"> fa-fighter-jet</option>_x000D_
<option value="fa-file"> fa-file</option>_x000D_
<option value="fa-file-archive-o"> fa-file-archive-o</option>_x000D_
<option value="fa-file-audio-o"> fa-file-audio-o</option>_x000D_
<option value="fa-file-code-o"> fa-file-code-o</option>_x000D_
<option value="fa-file-excel-o"> fa-file-excel-o</option>_x000D_
<option value="fa-file-image-o"> fa-file-image-o</option>_x000D_
<option value="fa-file-movie-o"> fa-file-movie-o</option>_x000D_
<option value="fa-file-o"> fa-file-o</option>_x000D_
<option value="fa-file-pdf-o"> fa-file-pdf-o</option>_x000D_
<option value="fa-file-photo-o"> fa-file-photo-o</option>_x000D_
<option value="fa-file-picture-o"> fa-file-picture-o</option>_x000D_
<option value="fa-file-powerpoint-o"> fa-file-powerpoint-o</option>_x000D_
<option value="fa-file-sound-o"> fa-file-sound-o</option>_x000D_
<option value="fa-file-text"> fa-file-text</option>_x000D_
<option value="fa-file-text-o"> fa-file-text-o</option>_x000D_
<option value="fa-file-video-o"> fa-file-video-o</option>_x000D_
<option value="fa-file-word-o"> fa-file-word-o</option>_x000D_
<option value="fa-file-zip-o"> fa-file-zip-o</option>_x000D_
<option value="fa-files-o"> fa-files-o</option>_x000D_
<option value="fa-film"> fa-film</option>_x000D_
<option value="fa-filter"> fa-filter</option>_x000D_
<option value="fa-fire"> fa-fire</option>_x000D_
<option value="fa-fire-extinguisher"> fa-fire-extinguisher</option>_x000D_
<option value="fa-firefox"> fa-firefox</option>_x000D_
<option value="fa-flag"> fa-flag</option>_x000D_
<option value="fa-flag-checkered"> fa-flag-checkered</option>_x000D_
<option value="fa-flag-o"> fa-flag-o</option>_x000D_
<option value="fa-flash"> fa-flash</option>_x000D_
<option value="fa-flask"> fa-flask</option>_x000D_
<option value="fa-flickr"> fa-flickr</option>_x000D_
<option value="fa-floppy-o"> fa-floppy-o</option>_x000D_
<option value="fa-folder"> fa-folder</option>_x000D_
<option value="fa-folder-o"> fa-folder-o</option>_x000D_
<option value="fa-folder-open"> fa-folder-open</option>_x000D_
<option value="fa-folder-open-o"> fa-folder-open-o</option>_x000D_
<option value="fa-font"> fa-font</option>_x000D_
<option value="fa-fonticons"> fa-fonticons</option>_x000D_
<option value="fa-forumbee"> fa-forumbee</option>_x000D_
<option value="fa-forward"> fa-forward</option>_x000D_
<option value="fa-foursquare"> fa-foursquare</option>_x000D_
<option value="fa-frown-o"> fa-frown-o</option>_x000D_
<option value="fa-futbol-o"> fa-futbol-o</option>_x000D_
<option value="fa-gamepad"> fa-gamepad</option>_x000D_
<option value="fa-gavel"> fa-gavel</option>_x000D_
<option value="fa-gbp"> fa-gbp</option>_x000D_
<option value="fa-ge"> fa-ge</option>_x000D_
<option value="fa-gear"> fa-gear</option>_x000D_
<option value="fa-gears"> fa-gears</option>_x000D_
<option value="fa-genderless"> fa-genderless</option>_x000D_
<option value="fa-get-pocket"> fa-get-pocket</option>_x000D_
<option value="fa-gg"> fa-gg</option>_x000D_
<option value="fa-gg-circle"> fa-gg-circle</option>_x000D_
<option value="fa-gift"> fa-gift</option>_x000D_
<option value="fa-git"> fa-git</option>_x000D_
<option value="fa-git-square"> fa-git-square</option>_x000D_
<option value="fa-github"> fa-github</option>_x000D_
<option value="fa-github-alt"> fa-github-alt</option>_x000D_
<option value="fa-github-square"> fa-github-square</option>_x000D_
<option value="fa-gittip"> fa-gittip</option>_x000D_
<option value="fa-glass"> fa-glass</option>_x000D_
<option value="fa-globe"> fa-globe</option>_x000D_
<option value="fa-google"> fa-google</option>_x000D_
<option value="fa-google-plus"> fa-google-plus</option>_x000D_
<option value="fa-google-plus-square"> fa-google-plus-square</option>_x000D_
<option value="fa-google-wallet"> fa-google-wallet</option>_x000D_
<option value="fa-graduation-cap"> fa-graduation-cap</option>_x000D_
<option value="fa-gratipay"> fa-gratipay</option>_x000D_
<option value="fa-group"> fa-group</option>_x000D_
<option value="fa-h-square"> fa-h-square</option>_x000D_
<option value="fa-hacker-news"> fa-hacker-news</option>_x000D_
<option value="fa-hand-grab-o"> fa-hand-grab-o</option>_x000D_
<option value="fa-hand-lizard-o"> fa-hand-lizard-o</option>_x000D_
<option value="fa-hand-o-down"> fa-hand-o-down</option>_x000D_
<option value="fa-hand-o-left"> fa-hand-o-left</option>_x000D_
<option value="fa-hand-o-right"> fa-hand-o-right</option>_x000D_
<option value="fa-hand-o-up"> fa-hand-o-up</option>_x000D_
<option value="fa-hand-paper-o"> fa-hand-paper-o</option>_x000D_
<option value="fa-hand-peace-o"> fa-hand-peace-o</option>_x000D_
<option value="fa-hand-pointer-o"> fa-hand-pointer-o</option>_x000D_
<option value="fa-hand-rock-o"> fa-hand-rock-o</option>_x000D_
<option value="fa-hand-scissors-o"> fa-hand-scissors-o</option>_x000D_
<option value="fa-hand-spock-o"> fa-hand-spock-o</option>_x000D_
<option value="fa-hand-stop-o"> fa-hand-stop-o</option>_x000D_
<option value="fa-hdd-o"> fa-hdd-o</option>_x000D_
<option value="fa-header"> fa-header</option>_x000D_
<option value="fa-headphones"> fa-headphones</option>_x000D_
<option value="fa-heart"> fa-heart</option>_x000D_
<option value="fa-heart-o"> fa-heart-o</option>_x000D_
<option value="fa-heartbeat"> fa-heartbeat</option>_x000D_
<option value="fa-history"> fa-history</option>_x000D_
<option value="fa-home"> fa-home</option>_x000D_
<option value="fa-hospital-o"> fa-hospital-o</option>_x000D_
<option value="fa-hotel"> fa-hotel</option>_x000D_
<option value="fa-hourglass"> fa-hourglass</option>_x000D_
<option value="fa-hourglass-1"> fa-hourglass-1</option>_x000D_
<option value="fa-hourglass-2"> fa-hourglass-2</option>_x000D_
<option value="fa-hourglass-3"> fa-hourglass-3</option>_x000D_
<option value="fa-hourglass-end"> fa-hourglass-end</option>_x000D_
<option value="fa-hourglass-half"> fa-hourglass-half</option>_x000D_
<option value="fa-hourglass-o"> fa-hourglass-o</option>_x000D_
<option value="fa-hourglass-start"> fa-hourglass-start</option>_x000D_
<option value="fa-houzz"> fa-houzz</option>_x000D_
<option value="fa-html5"> fa-html5</option>_x000D_
<option value="fa-i-cursor"> fa-i-cursor</option>_x000D_
<option value="fa-ils"> fa-ils</option>_x000D_
<option value="fa-image"> fa-image</option>_x000D_
<option value="fa-inbox"> fa-inbox</option>_x000D_
<option value="fa-indent"> fa-indent</option>_x000D_
<option value="fa-industry"> fa-industry</option>_x000D_
<option value="fa-info"> fa-info</option>_x000D_
<option value="fa-info-circle"> fa-info-circle</option>_x000D_
<option value="fa-inr"> fa-inr</option>_x000D_
<option value="fa-instagram"> fa-instagram</option>_x000D_
<option value="fa-institution"> fa-institution</option>_x000D_
<option value="fa-internet-explorer"> fa-internet-explorer</option>_x000D_
<option value="fa-intersex"> fa-intersex</option>_x000D_
<option value="fa-ioxhost"> fa-ioxhost</option>_x000D_
<option value="fa-italic"> fa-italic</option>_x000D_
<option value="fa-joomla"> fa-joomla</option>_x000D_
<option value="fa-jpy"> fa-jpy</option>_x000D_
<option value="fa-jsfiddle"> fa-jsfiddle</option>_x000D_
<option value="fa-key"> fa-key</option>_x000D_
<option value="fa-keyboard-o"> fa-keyboard-o</option>_x000D_
<option value="fa-krw"> fa-krw</option>_x000D_
<option value="fa-language"> fa-language</option>_x000D_
<option value="fa-laptop"> fa-laptop</option>_x000D_
<option value="fa-lastfm"> fa-lastfm</option>_x000D_
<option value="fa-lastfm-square"> fa-lastfm-square</option>_x000D_
<option value="fa-leaf"> fa-leaf</option>_x000D_
<option value="fa-leanpub"> fa-leanpub</option>_x000D_
<option value="fa-legal"> fa-legal</option>_x000D_
<option value="fa-lemon-o"> fa-lemon-o</option>_x000D_
<option value="fa-level-down"> fa-level-down</option>_x000D_
<option value="fa-level-up"> fa-level-up</option>_x000D_
<option value="fa-life-bouy"> fa-life-bouy</option>_x000D_
<option value="fa-life-buoy"> fa-life-buoy</option>_x000D_
<option value="fa-life-ring"> fa-life-ring</option>_x000D_
<option value="fa-life-saver"> fa-life-saver</option>_x000D_
<option value="fa-lightbulb-o"> fa-lightbulb-o</option>_x000D_
<option value="fa-line-chart"> fa-line-chart</option>_x000D_
<option value="fa-link"> fa-link</option>_x000D_
<option value="fa-linkedin"> fa-linkedin</option>_x000D_
<option value="fa-linkedin-square"> fa-linkedin-square</option>_x000D_
<option value="fa-linux"> fa-linux</option>_x000D_
<option value="fa-list"> fa-list</option>_x000D_
<option value="fa-list-alt"> fa-list-alt</option>_x000D_
<option value="fa-list-ol"> fa-list-ol</option>_x000D_
<option value="fa-list-ul"> fa-list-ul</option>_x000D_
<option value="fa-location-arrow"> fa-location-arrow</option>_x000D_
<option value="fa-lock"> fa-lock</option>_x000D_
<option value="fa-long-arrow-down"> fa-long-arrow-down</option>_x000D_
<option value="fa-long-arrow-left"> fa-long-arrow-left</option>_x000D_
<option value="fa-long-arrow-right"> fa-long-arrow-right</option>_x000D_
<option value="fa-long-arrow-up"> fa-long-arrow-up</option>_x000D_
<option value="fa-magic"> fa-magic</option>_x000D_
<option value="fa-magnet"> fa-magnet</option>_x000D_
_x000D_
<option value="fa-mars-stroke-v"> fa-mars-stroke-v</option>_x000D_
<option value="fa-maxcdn"> fa-maxcdn</option>_x000D_
<option value="fa-meanpath"> fa-meanpath</option>_x000D_
<option value="fa-medium"> fa-medium</option>_x000D_
<option value="fa-medkit"> fa-medkit</option>_x000D_
<option value="fa-meh-o"> fa-meh-o</option>_x000D_
<option value="fa-mercury"> fa-mercury</option>_x000D_
<option value="fa-microphone"> fa-microphone</option>_x000D_
<option value="fa-mobile"> fa-mobile</option>_x000D_
<option value="fa-motorcycle"> fa-motorcycle</option>_x000D_
<option value="fa-mouse-pointer"> fa-mouse-pointer</option>_x000D_
<option value="fa-music"> fa-music</option>_x000D_
<option value="fa-navicon"> fa-navicon</option>_x000D_
<option value="fa-neuter"> fa-neuter</option>_x000D_
<option value="fa-newspaper-o"> fa-newspaper-o</option>_x000D_
<option value="fa-opencart"> fa-opencart</option>_x000D_
<option value="fa-openid"> fa-openid</option>_x000D_
<option value="fa-opera"> fa-opera</option>_x000D_
<option value="fa-outdent"> fa-outdent</option>_x000D_
<option value="fa-pagelines"> fa-pagelines</option>_x000D_
<option value="fa-paper-plane-o"> fa-paper-plane-o</option>_x000D_
<option value="fa-paperclip"> fa-paperclip</option>_x000D_
<option value="fa-paragraph"> fa-paragraph</option>_x000D_
<option value="fa-paste"> fa-paste</option>_x000D_
<option value="fa-pause"> fa-pause</option>_x000D_
<option value="fa-paw"> fa-paw</option>_x000D_
<option value="fa-paypal"> fa-paypal</option>_x000D_
<option value="fa-pencil"> fa-pencil</option>_x000D_
<option value="fa-pencil-square-o"> fa-pencil-square-o</option>_x000D_
<option value="fa-phone"> fa-phone</option>_x000D_
<option value="fa-photo"> fa-photo</option>_x000D_
<option value="fa-picture-o"> fa-picture-o</option>_x000D_
<option value="fa-pie-chart"> fa-pie-chart</option>_x000D_
<option value="fa-pied-piper"> fa-pied-piper</option>_x000D_
<option value="fa-pied-piper-alt"> fa-pied-piper-alt</option>_x000D_
<option value="fa-pinterest"> fa-pinterest</option>_x000D_
<option value="fa-pinterest-p"> fa-pinterest-p</option>_x000D_
<option value="fa-pinterest-square"> fa-pinterest-square</option>_x000D_
<option value="fa-plane"> fa-plane</option>_x000D_
<option value="fa-play"> fa-play</option>_x000D_
<option value="fa-play-c
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>
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.
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;
}
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;
}
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.
If you want the caret down symbol, remove the "appearence: none" it implies to remove webkit and moz- as well from select in css.
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 :
_x000D_
_x000D_
_x000D_
_x000D_
select {_x000D_
font-family: 'FontAwesome', 'Second Font name'_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
<select>_x000D_
<option>Hi, </option>_x000D_
<option>Hi, </option>_x000D_
<option>Hi, </option>_x000D_
<option>Hi, </option>_x000D_
<option>Hi, </option>_x000D_
</select>The unicodes 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)
- Sarafi version 9.1
- Firefox version 45.0.2
_x000D_
_x000D_
_x000D_
_x000D_
select{_x000D_
font-family: FontAwesome, sans-serif;_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
<select multiple>_x000D_
<option> 500px</option>_x000D_
<option> Adjust</option>_x000D_
<option> Adn</option>_x000D_
<option> Align-center</option>_x000D_
<option> Align-justify</option>_x000D_
<option> Align-left</option>_x000D_
<option> Align-right</option>_x000D_
</select>Source: Stackoverflow.com