Skip to content

Simple alternative to visualize icon selected from select dropdown list

Jump to bottom
Overall Synergy edited this page Mar 4, 2016 · 1 revision 

<!-- Make an div for show icon-->
<div id="view-fa"></div>

<!-- own select -->
<select id="icons-fa" class="fa-select">
  <option value="fa-500px ">500px </option>
  <option value="fa-adjust ">adjust </option>
  <option value="fa-adn ">adn </option>
  <option value="fa-align-center ">align-center </option>
  <option value="fa-align-justify ">align-justify </option>
  <option value="fa-align-left ">align-left </option>
  <option value="fa-align-right ">align-right </option>
  <option value="fa-amazon ">amazon </option>
  <option value="fa-ambulance ">ambulance </option>
  <option value="fa-anchor ">anchor </option>
  <option value="fa-android ">android </option>
  <option value="fa-angellist ">angellist </option>
  <option value="fa-angle-double-down ">angle-double-down </option>
  <option value="fa-angle-double-left ">angle-double-left </option>
  <option value="fa-angle-double-right ">angle-double-right </option>
  <option value="fa-angle-double-up ">angle-double-up </option>
  <option value="fa-angle-down ">angle-down </option>
  <option value="fa-angle-left ">angle-left </option>
  <option value="fa-angle-right ">angle-right </option>
  <option value="fa-angle-up ">angle-up </option>
  <option value="fa-apple ">apple </option>
  <option value="fa-archive ">archive </option>
  <option value="fa-area-chart ">area-chart </option>
  <option value="fa-arrow-circle-down ">arrow-circle-down </option>
  <option value="fa-arrow-circle-left ">arrow-circle-left </option>
  <option value="fa-arrow-circle-o-down ">arrow-circle-o-down </option>
  <option value="fa-arrow-circle-o-left ">arrow-circle-o-left </option>
  <option value="fa-arrow-circle-o-right ">arrow-circle-o-right </option>
  <option value="fa-arrow-circle-o-up ">arrow-circle-o-up </option>
  <option value="fa-arrow-circle-right ">arrow-circle-right </option>
  <option value="fa-arrow-circle-up ">arrow-circle-up </option>
  <option value="fa-arrow-down ">arrow-down </option>
  <option value="fa-arrow-left ">arrow-left </option>
  <option value="fa-arrow-right ">arrow-right </option>
  <option value="fa-arrow-up ">arrow-up </option>
  <option value="fa-arrows ">arrows </option>
  <option value="fa-arrows-alt ">arrows-alt </option>
  <option value="fa-arrows-h ">arrows-h </option>
  <option value="fa-arrows-v ">arrows-v </option>
  <option value="fa-asterisk ">asterisk </option>
  <option value="fa-at ">at </option>
  <option value="fa-automobile (alias) ">automobile (alias) </option>
  <option value="fa-backward ">backward </option>
  <option value="fa-balance-scale ">balance-scale </option>
  <option value="fa-ban ">ban </option>
  <option value="fa-bank (alias) ">bank (alias) </option>
  <option value="fa-bar-chart ">bar-chart </option>
  <option value="fa-bar-chart-o (alias) ">bar-chart-o (alias) </option>
  <option value="fa-barcode ">barcode </option>
  <option value="fa-bars ">bars </option>
  <option value="fa-battery-0 (alias) ">battery-0 (alias) </option>
  <option value="fa-battery-1 (alias) ">battery-1 (alias) </option>
  <option value="fa-battery-2 (alias) ">battery-2 (alias) </option>
  <option value="fa-battery-3 (alias) ">battery-3 (alias) </option>
  <option value="fa-battery-4 (alias) ">battery-4 (alias) </option>
  <option value="fa-battery-empty ">battery-empty </option>
  <option value="fa-battery-full ">battery-full </option>
  <option value="fa-battery-half ">battery-half </option>
  <option value="fa-battery-quarter ">battery-quarter </option>
  <option value="fa-battery-three-quarters ">battery-three-quarters </option>
  <option value="fa-bed ">bed </option>
  <option value="fa-beer ">beer </option>
  <option value="fa-behance ">behance </option>
  <option value="fa-behance-square ">behance-square </option>
  <option value="fa-bell ">bell </option>
  <option value="fa-bell-o ">bell-o </option>
  <option value="fa-bell-slash ">bell-slash </option>
  <option value="fa-bell-slash-o ">bell-slash-o </option>
  <option value="fa-bicycle ">bicycle </option>
  <option value="fa-binoculars ">binoculars </option>
  <option value="fa-birthday-cake ">birthday-cake </option>
  <option value="fa-bitbucket ">bitbucket </option>
  <option value="fa-bitbucket-square ">bitbucket-square </option>
  <option value="fa-bitcoin (alias) ">bitcoin (alias) </option>
  <option value="fa-black-tie ">black-tie </option>
  <option value="fa-bluetooth ">bluetooth </option>
  <option value="fa-bluetooth-b ">bluetooth-b </option>
  <option value="fa-bold ">bold </option>
  <option value="fa-bolt ">bolt </option>
  <option value="fa-bomb ">bomb </option>
  <option value="fa-book ">book </option>
  <option value="fa-bookmark ">bookmark </option>
  <option value="fa-bookmark-o ">bookmark-o </option>
  <option value="fa-briefcase ">briefcase </option>
  <option value="fa-btc ">btc </option>
  <option value="fa-bug ">bug </option>
  <option value="fa-building ">building </option>
  <option value="fa-building-o ">building-o </option>
  <option value="fa-bullhorn ">bullhorn </option>
  <option value="fa-bullseye ">bullseye </option>
  <option value="fa-bus ">bus </option>
  <option value="fa-buysellads ">buysellads </option>
  <option value="fa-cab (alias) ">cab (alias) </option>
  <option value="fa-calculator ">calculator </option>
  <option value="fa-calendar ">calendar </option>
  <option value="fa-calendar-check-o ">calendar-check-o </option>
  <option value="fa-calendar-minus-o ">calendar-minus-o </option>
  <option value="fa-calendar-o ">calendar-o </option>
  <option value="fa-calendar-plus-o ">calendar-plus-o </option>
  <option value="fa-calendar-times-o ">calendar-times-o </option>
  <option value="fa-camera ">camera </option>
  <option value="fa-camera-retro ">camera-retro </option>
  <option value="fa-car ">car </option>
  <option value="fa-caret-down ">caret-down </option>
  <option value="fa-caret-left ">caret-left </option>
  <option value="fa-caret-right ">caret-right </option>
  <option value="fa-caret-square-o-down ">caret-square-o-down </option>
  <option value="fa-caret-square-o-left ">caret-square-o-left </option>
  <option value="fa-caret-square-o-right ">caret-square-o-right </option>
  <option value="fa-caret-square-o-up ">caret-square-o-up </option>
  <option value="fa-caret-up ">caret-up </option>
  <option value="fa-cart-arrow-down ">cart-arrow-down </option>
  <option value="fa-cart-plus ">cart-plus </option>
  <option value="fa-cc ">cc </option>
  <option value="fa-cc-amex ">cc-amex </option>
  <option value="fa-cc-diners-club ">cc-diners-club </option>
  <option value="fa-cc-discover ">cc-discover </option>
  <option value="fa-cc-jcb ">cc-jcb </option>
  <option value="fa-cc-mastercard ">cc-mastercard </option>
  <option value="fa-cc-paypal ">cc-paypal </option>
  <option value="fa-cc-stripe ">cc-stripe </option>
  <option value="fa-cc-visa ">cc-visa </option>
  <option value="fa-certificate ">certificate </option>
  <option value="fa-chain (alias) ">chain (alias) </option>
  <option value="fa-chain-broken ">chain-broken </option>
  <option value="fa-check ">check </option>
  <option value="fa-check-circle ">check-circle </option>
  <option value="fa-check-circle-o ">check-circle-o </option>
  <option value="fa-check-square ">check-square </option>
  <option value="fa-check-square-o ">check-square-o </option>
  <option value="fa-chevron-circle-down ">chevron-circle-down </option>
  <option value="fa-chevron-circle-left ">chevron-circle-left </option>
  <option value="fa-chevron-circle-right ">chevron-circle-right </option>
  <option value="fa-chevron-circle-up ">chevron-circle-up </option>
  <option value="fa-chevron-down ">chevron-down </option>
  <option value="fa-chevron-left ">chevron-left </option>
  <option value="fa-chevron-right ">chevron-right </option>
  <option value="fa-chevron-up ">chevron-up </option>
  <option value="fa-child ">child </option>
  <option value="fa-chrome ">chrome </option>
  <option value="fa-circle ">circle </option>
  <option value="fa-circle-o ">circle-o </option>
  <option value="fa-circle-o-notch ">circle-o-notch </option>
  <option value="fa-circle-thin ">circle-thin </option>
  <option value="fa-clipboard ">clipboard </option>
  <option value="fa-clock-o ">clock-o </option>
  <option value="fa-clone ">clone </option>
  <option value="fa-close (alias) ">close (alias) </option>
  <option value="fa-cloud ">cloud </option>
  <option value="fa-cloud-download ">cloud-download </option>
  <option value="fa-cloud-upload ">cloud-upload </option>
  <option value="fa-cny (alias) ">cny (alias) </option>
  <option value="fa-code ">code </option>
  <option value="fa-code-fork ">code-fork </option>
  <option value="fa-codepen ">codepen </option>
  <option value="fa-codiepie ">codiepie </option>
  <option value="fa-coffee ">coffee </option>
  <option value="fa-cog ">cog </option>
  <option value="fa-cogs ">cogs </option>
  <option value="fa-columns ">columns </option>
  <option value="fa-comment ">comment </option>
  <option value="fa-comment-o ">comment-o </option>
  <option value="fa-commenting ">commenting </option>
  <option value="fa-commenting-o ">commenting-o </option>
  <option value="fa-comments ">comments </option>
  <option value="fa-comments-o ">comments-o </option>
  <option value="fa-compass ">compass </option>
  <option value="fa-compress ">compress </option>
  <option value="fa-connectdevelop ">connectdevelop </option>
  <option value="fa-contao ">contao </option>
  <option value="fa-copy (alias) ">copy (alias) </option>
  <option value="fa-copyright ">copyright </option>
  <option value="fa-creative-commons ">creative-commons </option>
  <option value="fa-credit-card ">credit-card </option>
  <option value="fa-credit-card-alt ">credit-card-alt </option>
  <option value="fa-crop ">crop </option>
  <option value="fa-crosshairs ">crosshairs </option>
  <option value="fa-css3 ">css3 </option>
  <option value="fa-cube ">cube </option>
  <option value="fa-cubes ">cubes </option>
  <option value="fa-cut (alias) ">cut (alias) </option>
  <option value="fa-cutlery ">cutlery </option>
  <option value="fa-dashboard (alias) ">dashboard (alias) </option>
  <option value="fa-dashcube ">dashcube </option>
  <option value="fa-database ">database </option>
  <option value="fa-dedent (alias) ">dedent (alias) </option>
  <option value="fa-delicious ">delicious </option>
  <option value="fa-desktop ">desktop </option>
  <option value="fa-deviantart ">deviantart </option>
  <option value="fa-diamond ">diamond </option>
  <option value="fa-digg ">digg </option>
  <option value="fa-dollar (alias) ">dollar (alias) </option>
  <option value="fa-dot-circle-o ">dot-circle-o </option>
  <option value="fa-download ">download </option>
  <option value="fa-dribbble ">dribbble </option>
  <option value="fa-dropbox ">dropbox </option>
  <option value="fa-drupal ">drupal </option>
  <option value="fa-edge ">edge </option>
  <option value="fa-edit (alias) ">edit (alias) </option>
  <option value="fa-eject ">eject </option>
  <option value="fa-ellipsis-h ">ellipsis-h </option>
  <option value="fa-ellipsis-v ">ellipsis-v </option>
  <option value="fa-empire ">empire </option>
  <option value="fa-envelope ">envelope </option>
  <option value="fa-envelope-o ">envelope-o </option>
  <option value="fa-envelope-square ">envelope-square </option>
  <option value="fa-eraser ">eraser </option>
  <option value="fa-eur ">eur </option>
  <option value="fa-euro (alias) ">euro (alias) </option>
  <option value="fa-exchange ">exchange </option>
  <option value="fa-exclamation ">exclamation </option>
  <option value="fa-exclamation-circle ">exclamation-circle </option>
  <option value="fa-exclamation-triangle ">exclamation-triangle </option>
  <option value="fa-expand ">expand </option>
  <option value="fa-expeditedssl ">expeditedssl </option>
  <option value="fa-external-link ">external-link </option>
  <option value="fa-external-link-square ">external-link-square </option>
  <option value="fa-eye ">eye </option>
  <option value="fa-eye-slash ">eye-slash </option>
  <option value="fa-eyedropper ">eyedropper </option>
  <option value="fa-facebook ">facebook </option>
  <option value="fa-facebook-f (alias) ">facebook-f (alias) </option>
  <option value="fa-facebook-official ">facebook-official </option>
  <option value="fa-facebook-square ">facebook-square </option>
  <option value="fa-fast-backward ">fast-backward </option>
  <option value="fa-fast-forward ">fast-forward </option>
  <option value="fa-fax ">fax </option>
  <option value="fa-feed (alias) ">feed (alias) </option>
  <option value="fa-female ">female </option>
  <option value="fa-fighter-jet ">fighter-jet </option>
  <option value="fa-file ">file </option>
  <option value="fa-file-archive-o ">file-archive-o </option>
  <option value="fa-file-audio-o ">file-audio-o </option>
  <option value="fa-file-code-o ">file-code-o </option>
  <option value="fa-file-excel-o ">file-excel-o </option>
  <option value="fa-file-image-o ">file-image-o </option>
  <option value="fa-file-movie-o (alias) ">file-movie-o (alias) </option>
  <option value="fa-file-o ">file-o </option>
  <option value="fa-file-pdf-o ">file-pdf-o </option>
  <option value="fa-file-photo-o (alias) ">file-photo-o (alias) </option>
  <option value="fa-file-picture-o (alias) ">file-picture-o (alias) </option>
  <option value="fa-file-powerpoint-o ">file-powerpoint-o </option>
  <option value="fa-file-sound-o (alias) ">file-sound-o (alias) </option>
  <option value="fa-file-text ">file-text </option>
  <option value="fa-file-text-o ">file-text-o </option>
  <option value="fa-file-video-o ">file-video-o </option>
  <option value="fa-file-word-o ">file-word-o </option>
  <option value="fa-file-zip-o (alias) ">file-zip-o (alias) </option>
  <option value="fa-files-o ">files-o </option>
  <option value="fa-film ">film </option>
  <option value="fa-filter ">filter </option>
  <option value="fa-fire ">fire </option>
  <option value="fa-fire-extinguisher ">fire-extinguisher </option>
  <option value="fa-firefox ">firefox </option>
  <option value="fa-flag ">flag </option>
  <option value="fa-flag-checkered ">flag-checkered </option>
  <option value="fa-flag-o ">flag-o </option>
  <option value="fa-flash (alias) ">flash (alias) </option>
  <option value="fa-flask ">flask </option>
  <option value="fa-flickr ">flickr </option>
  <option value="fa-floppy-o ">floppy-o </option>
  <option value="fa-folder ">folder </option>
  <option value="fa-folder-o ">folder-o </option>
  <option value="fa-folder-open ">folder-open </option>
  <option value="fa-folder-open-o ">folder-open-o </option>
  <option value="fa-font ">font </option>
  <option value="fa-fonticons ">fonticons </option>
  <option value="fa-fort-awesome ">fort-awesome </option>
  <option value="fa-forumbee ">forumbee </option>
  <option value="fa-forward ">forward </option>
  <option value="fa-foursquare ">foursquare </option>
  <option value="fa-frown-o ">frown-o </option>
  <option value="fa-futbol-o ">futbol-o </option>
  <option value="fa-gamepad ">gamepad </option>
  <option value="fa-gavel ">gavel </option>
  <option value="fa-gbp ">gbp </option>
  <option value="fa-ge (alias) ">ge (alias) </option>
  <option value="fa-gear (alias) ">gear (alias) </option>
  <option value="fa-gears (alias) ">gears (alias) </option>
  <option value="fa-genderless ">genderless </option>
  <option value="fa-get-pocket ">get-pocket </option>
  <option value="fa-gg ">gg </option>
  <option value="fa-gg-circle ">gg-circle </option>
  <option value="fa-gift ">gift </option>
  <option value="fa-git ">git </option>
  <option value="fa-git-square ">git-square </option>
  <option value="fa-github ">github </option>
  <option value="fa-github-alt ">github-alt </option>
  <option value="fa-github-square ">github-square </option>
  <option value="fa-gittip (alias) ">gittip (alias) </option>
  <option value="fa-glass ">glass </option>
  <option value="fa-globe ">globe </option>
  <option value="fa-google ">google </option>
  <option value="fa-google-plus ">google-plus </option>
  <option value="fa-google-plus-square ">google-plus-square </option>
  <option value="fa-google-wallet ">google-wallet </option>
  <option value="fa-graduation-cap ">graduation-cap </option>
  <option value="fa-gratipay ">gratipay </option>
  <option value="fa-group (alias) ">group (alias) </option>
  <option value="fa-h-square ">h-square </option>
  <option value="fa-hacker-news ">hacker-news </option>
  <option value="fa-hand-grab-o (alias) ">hand-grab-o (alias) </option>
  <option value="fa-hand-lizard-o ">hand-lizard-o </option>
  <option value="fa-hand-o-down ">hand-o-down </option>
  <option value="fa-hand-o-left ">hand-o-left </option>
  <option value="fa-hand-o-right ">hand-o-right </option>
  <option value="fa-hand-o-up ">hand-o-up </option>
  <option value="fa-hand-paper-o ">hand-paper-o </option>
  <option value="fa-hand-peace-o ">hand-peace-o </option>
  <option value="fa-hand-pointer-o ">hand-pointer-o </option>
  <option value="fa-hand-rock-o ">hand-rock-o </option>
  <option value="fa-hand-scissors-o ">hand-scissors-o </option>
  <option value="fa-hand-spock-o ">hand-spock-o </option>
  <option value="fa-hand-stop-o (alias) ">hand-stop-o (alias) </option>
  <option value="fa-hashtag ">hashtag </option>
  <option value="fa-hdd-o ">hdd-o </option>
  <option value="fa-header ">header </option>
  <option value="fa-headphones ">headphones </option>
  <option value="fa-heart ">heart </option>
  <option value="fa-heart-o ">heart-o </option>
  <option value="fa-heartbeat ">heartbeat </option>
  <option value="fa-history ">history </option>
  <option value="fa-home ">home </option>
  <option value="fa-hospital-o ">hospital-o </option>
  <option value="fa-hotel (alias) ">hotel (alias) </option>
  <option value="fa-hourglass ">hourglass </option>
  <option value="fa-hourglass-1 (alias) ">hourglass-1 (alias) </option>
  <option value="fa-hourglass-2 (alias) ">hourglass-2 (alias) </option>
  <option value="fa-hourglass-3 (alias) ">hourglass-3 (alias) </option>
  <option value="fa-hourglass-end ">hourglass-end </option>
  <option value="fa-hourglass-half ">hourglass-half </option>
  <option value="fa-hourglass-o ">hourglass-o </option>
  <option value="fa-hourglass-start ">hourglass-start </option>
  <option value="fa-houzz ">houzz </option>
  <option value="fa-html5 ">html5 </option>
  <option value="fa-i-cursor ">i-cursor </option>
  <option value="fa-ils ">ils </option>
  <option value="fa-image (alias) ">image (alias) </option>
  <option value="fa-inbox ">inbox </option>
  <option value="fa-indent ">indent </option>
  <option value="fa-industry ">industry </option>
  <option value="fa-info ">info </option>
  <option value="fa-info-circle ">info-circle </option>
  <option value="fa-inr ">inr </option>
  <option value="fa-instagram ">instagram </option>
  <option value="fa-institution (alias) ">institution (alias) </option>
  <option value="fa-internet-explorer ">internet-explorer </option>
  <option value="fa-intersex (alias) ">intersex (alias) </option>
  <option value="fa-ioxhost ">ioxhost </option>
  <option value="fa-italic ">italic </option>
  <option value="fa-joomla ">joomla </option>
  <option value="fa-jpy ">jpy </option>
  <option value="fa-jsfiddle ">jsfiddle </option>
  <option value="fa-key ">key </option>
  <option value="fa-keyboard-o ">keyboard-o </option>
  <option value="fa-krw ">krw </option>
  <option value="fa-language ">language </option>
  <option value="fa-laptop ">laptop </option>
  <option value="fa-lastfm ">lastfm </option>
  <option value="fa-lastfm-square ">lastfm-square </option>
  <option value="fa-leaf ">leaf </option>
  <option value="fa-leanpub ">leanpub </option>
  <option value="fa-legal (alias) ">legal (alias) </option>
  <option value="fa-lemon-o ">lemon-o </option>
  <option value="fa-level-down ">level-down </option>
  <option value="fa-level-up ">level-up </option>
  <option value="fa-life-bouy (alias) ">life-bouy (alias) </option>
  <option value="fa-life-buoy (alias) ">life-buoy (alias) </option>
  <option value="fa-life-ring ">life-ring </option>
  <option value="fa-life-saver (alias) ">life-saver (alias) </option>
  <option value="fa-lightbulb-o ">lightbulb-o </option>
  <option value="fa-line-chart ">line-chart </option>
  <option value="fa-link ">link </option>
  <option value="fa-linkedin ">linkedin </option>
  <option value="fa-linkedin-square ">linkedin-square </option>
  <option value="fa-linux ">linux </option>
  <option value="fa-list ">list </option>
  <option value="fa-list-alt ">list-alt </option>
  <option value="fa-list-ol ">list-ol </option>
  <option value="fa-list-ul ">list-ul </option>
  <option value="fa-location-arrow ">location-arrow </option>
  <option value="fa-lock ">lock </option>
  <option value="fa-long-arrow-down ">long-arrow-down </option>
  <option value="fa-long-arrow-left ">long-arrow-left </option>
  <option value="fa-long-arrow-right ">long-arrow-right </option>
  <option value="fa-long-arrow-up ">long-arrow-up </option>
  <option value="fa-magic ">magic </option>
  <option value="fa-magnet ">magnet </option>
  <option value="fa-mail-forward (alias) ">mail-forward (alias) </option>
  <option value="fa-mail-reply (alias) ">mail-reply (alias) </option>
  <option value="fa-mail-reply-all (alias) ">mail-reply-all (alias) </option>
  <option value="fa-male ">male </option>
  <option value="fa-map ">map </option>
  <option value="fa-map-marker ">map-marker </option>
  <option value="fa-map-o ">map-o </option>
  <option value="fa-map-pin ">map-pin </option>
  <option value="fa-map-signs ">map-signs </option>
  <option value="fa-mars ">mars </option>
  <option value="fa-mars-double ">mars-double </option>
  <option value="fa-mars-stroke ">mars-stroke </option>
  <option value="fa-mars-stroke-h ">mars-stroke-h </option>
  <option value="fa-mars-stroke-v ">mars-stroke-v </option>
  <option value="fa-maxcdn ">maxcdn </option>
  <option value="fa-meanpath ">meanpath </option>
  <option value="fa-medium ">medium </option>
  <option value="fa-medkit ">medkit </option>
  <option value="fa-meh-o ">meh-o </option>
  <option value="fa-mercury ">mercury </option>
  <option value="fa-microphone ">microphone </option>
  <option value="fa-microphone-slash ">microphone-slash </option>
  <option value="fa-minus ">minus </option>
  <option value="fa-minus-circle ">minus-circle </option>
  <option value="fa-minus-square ">minus-square </option>
  <option value="fa-minus-square-o ">minus-square-o </option>
  <option value="fa-mixcloud ">mixcloud </option>
  <option value="fa-mobile ">mobile </option>
  <option value="fa-mobile-phone (alias) ">mobile-phone (alias) </option>
  <option value="fa-modx ">modx </option>
  <option value="fa-money ">money </option>
  <option value="fa-moon-o ">moon-o </option>
  <option value="fa-mortar-board (alias) ">mortar-board (alias) </option>
  <option value="fa-motorcycle ">motorcycle </option>
  <option value="fa-mouse-pointer ">mouse-pointer </option>
  <option value="fa-music ">music </option>
  <option value="fa-navicon (alias) ">navicon (alias) </option>
  <option value="fa-neuter ">neuter </option>
  <option value="fa-newspaper-o ">newspaper-o </option>
  <option value="fa-object-group ">object-group </option>
  <option value="fa-object-ungroup ">object-ungroup </option>
  <option value="fa-odnoklassniki ">odnoklassniki </option>
  <option value="fa-odnoklassniki-square ">odnoklassniki-square </option>
  <option value="fa-opencart ">opencart </option>
  <option value="fa-openid ">openid </option>
  <option value="fa-opera ">opera </option>
  <option value="fa-optin-monster ">optin-monster </option>
  <option value="fa-outdent ">outdent </option>
  <option value="fa-pagelines ">pagelines </option>
  <option value="fa-paint-brush ">paint-brush </option>
  <option value="fa-paper-plane ">paper-plane </option>
  <option value="fa-paper-plane-o ">paper-plane-o </option>
  <option value="fa-paperclip ">paperclip </option>
  <option value="fa-paragraph ">paragraph </option>
  <option value="fa-paste (alias) ">paste (alias) </option>
  <option value="fa-pause ">pause </option>
  <option value="fa-pause-circle ">pause-circle </option>
  <option value="fa-pause-circle-o ">pause-circle-o </option>
  <option value="fa-paw ">paw </option>
  <option value="fa-paypal ">paypal </option>
  <option value="fa-pencil ">pencil </option>
  <option value="fa-pencil-square ">pencil-square </option>
  <option value="fa-pencil-square-o ">pencil-square-o </option>
  <option value="fa-percent ">percent </option>
  <option value="fa-phone ">phone </option>
  <option value="fa-phone-square ">phone-square </option>
  <option value="fa-photo (alias) ">photo (alias) </option>
  <option value="fa-picture-o ">picture-o </option>
  <option value="fa-pie-chart ">pie-chart </option>
  <option value="fa-pied-piper ">pied-piper </option>
  <option value="fa-pied-piper-alt ">pied-piper-alt </option>
  <option value="fa-pinterest ">pinterest </option>
  <option value="fa-pinterest-p ">pinterest-p </option>
  <option value="fa-pinterest-square ">pinterest-square </option>
  <option value="fa-plane ">plane </option>
  <option value="fa-play ">play </option>
  <option value="fa-play-circle ">play-circle </option>
  <option value="fa-play-circle-o ">play-circle-o </option>
  <option value="fa-plug ">plug </option>
  <option value="fa-plus ">plus </option>
  <option value="fa-plus-circle ">plus-circle </option>
  <option value="fa-plus-square ">plus-square </option>
  <option value="fa-plus-square-o ">plus-square-o </option>
  <option value="fa-power-off ">power-off </option>
  <option value="fa-print ">print </option>
  <option value="fa-product-hunt ">product-hunt </option>
  <option value="fa-puzzle-piece ">puzzle-piece </option>
  <option value="fa-qq ">qq </option>
  <option value="fa-qrcode ">qrcode </option>
  <option value="fa-question ">question </option>
  <option value="fa-question-circle ">question-circle </option>
  <option value="fa-quote-left ">quote-left </option>
  <option value="fa-quote-right ">quote-right </option>
  <option value="fa-ra (alias) ">ra (alias) </option>
  <option value="fa-random ">random </option>
  <option value="fa-rebel ">rebel </option>
  <option value="fa-recycle ">recycle </option>
  <option value="fa-reddit ">reddit </option>
  <option value="fa-reddit-alien ">reddit-alien </option>
  <option value="fa-reddit-square ">reddit-square </option>
  <option value="fa-refresh ">refresh </option>
  <option value="fa-registered ">registered </option>
  <option value="fa-remove (alias) ">remove (alias) </option>
  <option value="fa-renren ">renren </option>
  <option value="fa-reorder (alias) ">reorder (alias) </option>
  <option value="fa-repeat ">repeat </option>
  <option value="fa-reply ">reply </option>
  <option value="fa-reply-all ">reply-all </option>
  <option value="fa-retweet ">retweet </option>
  <option value="fa-rmb (alias) ">rmb (alias) </option>
  <option value="fa-road ">road </option>
  <option value="fa-rocket ">rocket </option>
  <option value="fa-rotate-left (alias) ">rotate-left (alias) </option>
  <option value="fa-rotate-right (alias) ">rotate-right (alias) </option>
  <option value="fa-rouble (alias) ">rouble (alias) </option>
  <option value="fa-rss ">rss </option>
  <option value="fa-rss-square ">rss-square </option>
  <option value="fa-rub ">rub </option>
  <option value="fa-ruble (alias) ">ruble (alias) </option>
  <option value="fa-rupee (alias) ">rupee (alias) </option>
  <option value="fa-safari ">safari </option>
  <option value="fa-save (alias) ">save (alias) </option>
  <option value="fa-scissors ">scissors </option>
  <option value="fa-scribd ">scribd </option>
  <option value="fa-search ">search </option>
  <option value="fa-search-minus ">search-minus </option>
  <option value="fa-search-plus ">search-plus </option>
  <option value="fa-sellsy ">sellsy </option>
  <option value="fa-send (alias) ">send (alias) </option>
  <option value="fa-send-o (alias) ">send-o (alias) </option>
  <option value="fa-server ">server </option>
  <option value="fa-share ">share </option>
  <option value="fa-share-alt ">share-alt </option>
  <option value="fa-share-alt-square ">share-alt-square </option>
  <option value="fa-share-square ">share-square </option>
  <option value="fa-share-square-o ">share-square-o </option>
  <option value="fa-shekel (alias) ">shekel (alias) </option>
  <option value="fa-sheqel (alias) ">sheqel (alias) </option>
  <option value="fa-shield ">shield </option>
  <option value="fa-ship ">ship </option>
  <option value="fa-shirtsinbulk ">shirtsinbulk </option>
  <option value="fa-shopping-bag ">shopping-bag </option>
  <option value="fa-shopping-basket ">shopping-basket </option>
  <option value="fa-shopping-cart ">shopping-cart </option>
  <option value="fa-sign-in ">sign-in </option>
  <option value="fa-sign-out ">sign-out </option>
  <option value="fa-signal ">signal </option>
  <option value="fa-simplybuilt ">simplybuilt </option>
  <option value="fa-sitemap ">sitemap </option>
  <option value="fa-skyatlas ">skyatlas </option>
  <option value="fa-skype ">skype </option>
  <option value="fa-slack ">slack </option>
  <option value="fa-sliders ">sliders </option>
  <option value="fa-slideshare ">slideshare </option>
  <option value="fa-smile-o ">smile-o </option>
  <option value="fa-soccer-ball-o (alias) ">soccer-ball-o (alias) </option>
  <option value="fa-sort ">sort </option>
  <option value="fa-sort-alpha-asc ">sort-alpha-asc </option>
  <option value="fa-sort-alpha-desc ">sort-alpha-desc </option>
  <option value="fa-sort-amount-asc ">sort-amount-asc </option>
  <option value="fa-sort-amount-desc ">sort-amount-desc </option>
  <option value="fa-sort-asc ">sort-asc </option>
  <option value="fa-sort-desc ">sort-desc </option>
  <option value="fa-sort-down (alias) ">sort-down (alias) </option>
  <option value="fa-sort-numeric-asc ">sort-numeric-asc </option>
  <option value="fa-sort-numeric-desc ">sort-numeric-desc </option>
  <option value="fa-sort-up (alias) ">sort-up (alias) </option>
  <option value="fa-soundcloud ">soundcloud </option>
  <option value="fa-space-shuttle ">space-shuttle </option>
  <option value="fa-spinner ">spinner </option>
  <option value="fa-spoon ">spoon </option>
  <option value="fa-spotify ">spotify </option>
  <option value="fa-square ">square </option>
  <option value="fa-square-o ">square-o </option>
  <option value="fa-stack-exchange ">stack-exchange </option>
  <option value="fa-stack-overflow ">stack-overflow </option>
  <option value="fa-star ">star </option>
  <option value="fa-star-half ">star-half </option>
  <option value="fa-star-half-empty (alias) ">star-half-empty (alias) </option>
  <option value="fa-star-half-full (alias) ">star-half-full (alias) </option>
  <option value="fa-star-half-o ">star-half-o </option>
  <option value="fa-star-o ">star-o </option>
  <option value="fa-steam ">steam </option>
  <option value="fa-steam-square ">steam-square </option>
  <option value="fa-step-backward ">step-backward </option>
  <option value="fa-step-forward ">step-forward </option>
  <option value="fa-stethoscope ">stethoscope </option>
  <option value="fa-sticky-note ">sticky-note </option>
  <option value="fa-sticky-note-o ">sticky-note-o </option>
  <option value="fa-stop ">stop </option>
  <option value="fa-stop-circle ">stop-circle </option>
  <option value="fa-stop-circle-o ">stop-circle-o </option>
  <option value="fa-street-view ">street-view </option>
  <option value="fa-strikethrough ">strikethrough </option>
  <option value="fa-stumbleupon ">stumbleupon </option>
  <option value="fa-stumbleupon-circle ">stumbleupon-circle </option>
  <option value="fa-subscript ">subscript </option>
  <option value="fa-subway ">subway </option>
  <option value="fa-suitcase ">suitcase </option>
  <option value="fa-sun-o ">sun-o </option>
  <option value="fa-superscript ">superscript </option>
  <option value="fa-support (alias) ">support (alias) </option>
  <option value="fa-table ">table </option>
  <option value="fa-tablet ">tablet </option>
  <option value="fa-tachometer ">tachometer </option>
  <option value="fa-tag ">tag </option>
  <option value="fa-tags ">tags </option>
  <option value="fa-tasks ">tasks </option>
  <option value="fa-taxi ">taxi </option>
  <option value="fa-television ">television </option>
  <option value="fa-tencent-weibo ">tencent-weibo </option>
  <option value="fa-terminal ">terminal </option>
  <option value="fa-text-height ">text-height </option>
  <option value="fa-text-width ">text-width </option>
  <option value="fa-th ">th </option>
  <option value="fa-th-large ">th-large </option>
  <option value="fa-th-list ">th-list </option>
  <option value="fa-thumb-tack ">thumb-tack </option>
  <option value="fa-thumbs-down ">thumbs-down </option>
  <option value="fa-thumbs-o-down ">thumbs-o-down </option>
  <option value="fa-thumbs-o-up ">thumbs-o-up </option>
  <option value="fa-thumbs-up ">thumbs-up </option>
  <option value="fa-ticket ">ticket </option>
  <option value="fa-times ">times </option>
  <option value="fa-times-circle ">times-circle </option>
  <option value="fa-times-circle-o ">times-circle-o </option>
  <option value="fa-tint ">tint </option>
  <option value="fa-toggle-down (alias) ">toggle-down (alias) </option>
  <option value="fa-toggle-left (alias) ">toggle-left (alias) </option>
  <option value="fa-toggle-off ">toggle-off </option>
  <option value="fa-toggle-on ">toggle-on </option>
  <option value="fa-toggle-right (alias) ">toggle-right (alias) </option>
  <option value="fa-toggle-up (alias) ">toggle-up (alias) </option>
  <option value="fa-trademark ">trademark </option>
  <option value="fa-train ">train </option>
  <option value="fa-transgender ">transgender </option>
  <option value="fa-transgender-alt ">transgender-alt </option>
  <option value="fa-trash ">trash </option>
  <option value="fa-trash-o ">trash-o </option>
  <option value="fa-tree ">tree </option>
  <option value="fa-trello ">trello </option>
  <option value="fa-tripadvisor ">tripadvisor </option>
  <option value="fa-trophy ">trophy </option>
  <option value="fa-truck ">truck </option>
  <option value="fa-try ">try </option>
  <option value="fa-tty ">tty </option>
  <option value="fa-tumblr ">tumblr </option>
  <option value="fa-tumblr-square ">tumblr-square </option>
  <option value="fa-turkish-lira (alias) ">turkish-lira (alias) </option>
  <option value="fa-tv (alias) ">tv (alias) </option>
  <option value="fa-twitch ">twitch </option>
  <option value="fa-twitter ">twitter </option>
  <option value="fa-twitter-square ">twitter-square </option>
  <option value="fa-umbrella ">umbrella </option>
  <option value="fa-underline ">underline </option>
  <option value="fa-undo ">undo </option>
  <option value="fa-university ">university </option>
  <option value="fa-unlink (alias) ">unlink (alias) </option>
  <option value="fa-unlock ">unlock </option>
  <option value="fa-unlock-alt ">unlock-alt </option>
  <option value="fa-unsorted (alias) ">unsorted (alias) </option>
  <option value="fa-upload ">upload </option>
  <option value="fa-usb ">usb </option>
  <option value="fa-usd ">usd </option>
  <option value="fa-user ">user </option>
  <option value="fa-user-md ">user-md </option>
  <option value="fa-user-plus ">user-plus </option>
  <option value="fa-user-secret ">user-secret </option>
  <option value="fa-user-times ">user-times </option>
  <option value="fa-users ">users </option>
  <option value="fa-venus ">venus </option>
  <option value="fa-venus-double ">venus-double </option>
  <option value="fa-venus-mars ">venus-mars </option>
  <option value="fa-viacoin ">viacoin </option>
  <option value="fa-video-camera ">video-camera </option>
  <option value="fa-vimeo ">vimeo </option>
  <option value="fa-vimeo-square ">vimeo-square </option>
  <option value="fa-vine ">vine </option>
  <option value="fa-vk ">vk </option>
  <option value="fa-volume-down ">volume-down </option>
  <option value="fa-volume-off ">volume-off </option>
  <option value="fa-volume-up ">volume-up </option>
  <option value="fa-warning (alias) ">warning (alias) </option>
  <option value="fa-wechat (alias) ">wechat (alias) </option>
  <option value="fa-weibo ">weibo </option>
  <option value="fa-weixin ">weixin </option>
  <option value="fa-whatsapp ">whatsapp </option>
  <option value="fa-wheelchair ">wheelchair </option>
  <option value="fa-wifi ">wifi </option>
  <option value="fa-wikipedia-w ">wikipedia-w </option>
  <option value="fa-windows ">windows </option>
  <option value="fa-won (alias) ">won (alias) </option>
  <option value="fa-wordpress ">wordpress </option>
  <option value="fa-wrench ">wrench </option>
  <option value="fa-xing ">xing </option>
  <option value="fa-xing-square ">xing-square </option>
  <option value="fa-y-combinator ">y-combinator </option>
  <option value="fa-y-combinator-square (alias) ">y-combinator-square (alias) </option>
  <option value="fa-yahoo ">yahoo </option>
  <option value="fa-yc (alias) ">yc (alias) </option>
  <option value="fa-yc-square (alias) ">yc-square (alias) </option>
  <option value="fa-yelp ">yelp </option>
  <option value="fa-yen (alias) ">yen (alias) </option>
  <option value="fa-youtube ">youtube </option>
  <option value="fa-youtube-play ">youtube-play </option>
  <option value="fa-youtube-square ">youtube-square </option>
</select>

<!-- Simple jq script for show selected item -->
<script>
  $(document).ready(function(){
        /* Detect any change of option*/
  	$("#icons-fa").change(function(){
  		var icono = $(this).val();
  		$("#view-fa").html('<i class="fa '+icono+'"></i>');
  	});
        
         /* simulate an change on select */
  	$("#icons-fa").change();
  });
</script>
Clone this wiki locally