Menu
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
q=html+select+image. as a general solution: if you can, get your icons together as SVGs, import them into a font of your choice into the personal Unicode range, use that font in your <option> s; supported by everything up from IE 8.0, small and simple.
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>Working fiddle
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
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>JSFiddle
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>You can't add i tag in option tag because tags are stripped.
But you can add it after the select like this
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 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With