Tuesday, January 31, 2017

Font Awsome in the dropdown

you can use this link also
https://itsjavi.com/fontawesome-iconpicker/

or using direct html


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>

<select style="font-family:'FontAwesome'">
<option>&#xf000; icon-glass</option>
<option>&#xf001; icon-music</option>
<option>&#xf002; icon-search</option>
<option>&#xf003; icon-envelope-alt</option>
<option>&#xf004; icon-heart</option>
<option>&#xf005; icon-star</option>
<option>&#xf006; icon-star-empty</option>
<option>&#xf007; icon-user</option>
<option>&#xf008; icon-film</option>
<option>&#xf009; icon-th-large</option>
<option>&#xf00a; icon-th</option>
<option>&#xf00b; icon-th-list</option>
<option>&#xf00c; icon-ok</option>
<option>&#xf00d; icon-remove</option>
<option>&#xf00e; icon-zoom-in</option>
<option>&#xf010; icon-zoom-out</option>
<option>&#xf011; icon-off</option>
<option>&#xf012; icon-signal</option>
<option>&#xf013; icon-cog</option>
<option>&#xf014; icon-trash</option>
<option>&#xf015; icon-home</option>
<option>&#xf016; icon-file-alt</option>
<option>&#xf017; icon-time</option>
<option>&#xf018; icon-road</option>
<option>&#xf019; icon-download-alt</option>
<option>&#xf01a; icon-download</option>
<option>&#xf01b; icon-upload</option>
<option>&#xf01c; icon-inbox</option>
<option>&#xf01d; icon-play-circle</option>
<option>&#xf01e; icon-repeat</option>
<option>&#xf021; icon-refresh</option>
<option>&#xf022; icon-list-alt</option>
<option>&#xf023; icon-lock</option>
<option>&#xf024; icon-flag</option>
<option>&#xf025; icon-headphones</option>
<option>&#xf026; icon-volume-off</option>
<option>&#xf027; icon-volume-down</option>
<option>&#xf028; icon-volume-up</option>
<option>&#xf029; icon-qrcode</option>
<option>&#xf02a; icon-barcode</option>
<option>&#xf02b; icon-tag</option>
<option>&#xf02c; icon-tags</option>
<option>&#xf02d; icon-book</option>
<option>&#xf02e; icon-bookmark</option>
<option>&#xf02f; icon-print</option>
<option>&#xf030; icon-camera</option>
<option>&#xf031; icon-font</option>
<option>&#xf032; icon-bold</option>
<option>&#xf033; icon-italic</option>
<option>&#xf034; icon-text-height</option>
<option>&#xf035; icon-text-width</option>
<option>&#xf036; icon-align-left</option>
<option>&#xf037; icon-align-center</option>
<option>&#xf038; icon-align-right</option>
<option>&#xf039; icon-align-justify</option>
<option>&#xf03a; icon-list</option>
<option>&#xf03b; icon-indent-left</option>
<option>&#xf03c; icon-indent-right</option>
<option>&#xf03d; icon-facetime-video</option>
<option>&#xf03e; icon-picture</option>
<option>&#xf040; icon-pencil</option>
<option>&#xf041; icon-map-marker</option>
<option>&#xf042; icon-adjust</option>
<option>&#xf043; icon-tint</option>
<option>&#xf044; icon-edit</option>
<option>&#xf045; icon-share</option>
<option>&#xf046; icon-check</option>
<option>&#xf047; icon-move</option>
<option>&#xf048; icon-step-backward</option>
<option>&#xf049; icon-fast-backward</option>
<option>&#xf04a; icon-backward</option>
<option>&#xf04b; icon-play</option>
<option>&#xf04c; icon-pause</option>
<option>&#xf04d; icon-stop</option>
<option>&#xf04e; icon-forward</option>
<option>&#xf050; icon-fast-forward</option>
<option>&#xf051; icon-step-forward</option>
<option>&#xf052; icon-eject</option>
<option>&#xf053; icon-chevron-left</option>
<option>&#xf054; icon-chevron-right</option>
<option>&#xf055; icon-plus-sign</option>
<option>&#xf056; icon-minus-sign</option>
<option>&#xf057; icon-remove-sign</option>
<option>&#xf058; icon-ok-sign</option>
<option>&#xf059; icon-question-sign</option>
<option>&#xf05a; icon-info-sign</option>
<option>&#xf05b; icon-screenshot</option>
<option>&#xf05c; icon-remove-circle</option>
<option>&#xf05d; icon-ok-circle</option>
<option>&#xf05e; icon-ban-circle</option>
<option>&#xf060; icon-arrow-left</option>
<option>&#xf061; icon-arrow-right</option>
<option>&#xf062; icon-arrow-up</option>
<option>&#xf063; icon-arrow-down</option>
<option>&#xf064; icon-share-alt</option>
<option>&#xf065; icon-resize-full</option>
<option>&#xf066; icon-resize-small</option>
<option>&#xf067; icon-plus</option>
<option>&#xf068; icon-minus</option>
<option>&#xf069; icon-asterisk</option>
<option>&#xf06a; icon-exclamation-sign</option>
<option>&#xf06b; icon-gift</option>
<option>&#xf06c; icon-leaf</option>
<option>&#xf06d; icon-fire</option>
<option>&#xf06e; icon-eye-open</option>
<option>&#xf070; icon-eye-close</option>
<option>&#xf071; icon-warning-sign</option>
<option>&#xf072; icon-plane</option>
<option>&#xf073; icon-calendar</option>
<option>&#xf074; icon-random</option>
<option>&#xf075; icon-comment</option>
<option>&#xf076; icon-magnet</option>
<option>&#xf077; icon-chevron-up</option>
<option>&#xf078; icon-chevron-down</option>
<option>&#xf079; icon-retweet</option>
<option>&#xf07a; icon-shopping-cart</option>
<option>&#xf07b; icon-folder-close</option>
<option>&#xf07c; icon-folder-open</option>
<option>&#xf07d; icon-resize-vertical</option>
<option>&#xf07e; icon-resize-horizontal</option>
<option>&#xf080; icon-bar-chart</option>
<option>&#xf081; icon-twitter-sign</option>
<option>&#xf082; icon-facebook-sign</option>
<option>&#xf083; icon-camera-retro</option>
<option>&#xf084; icon-key</option>
<option>&#xf085; icon-cogs</option>
<option>&#xf086; icon-comments</option>
<option>&#xf087; icon-thumbs-up-alt</option>
<option>&#xf088; icon-thumbs-down-alt</option>
<option>&#xf089; icon-star-half</option>
<option>&#xf08a; icon-heart-empty</option>
<option>&#xf08b; icon-signout</option>
<option>&#xf08c; icon-linkedin-sign</option>
<option>&#xf08d; icon-pushpin</option>
<option>&#xf08e; icon-external-link</option>
<option>&#xf090; icon-signin</option>
<option>&#xf091; icon-trophy</option>
<option>&#xf092; icon-github-sign</option>
<option>&#xf093; icon-upload-alt</option>
<option>&#xf094; icon-lemon</option>
<option>&#xf095; icon-phone</option>
<option>&#xf096; icon-check-empty</option>
<option>&#xf097; icon-bookmark-empty</option>
<option>&#xf098; icon-phone-sign</option>
<option>&#xf099; icon-twitter</option>
<option>&#xf09a; icon-facebook</option>
<option>&#xf09b; icon-github</option>
<option>&#xf09c; icon-unlock</option>
<option>&#xf09d; icon-credit-card</option>
<option>&#xf09e; icon-rss</option>
<option>&#xf0a0; icon-hdd</option>
<option>&#xf0a1; icon-bullhorn</option>
<option>&#xf0a2; icon-bell</option>
<option>&#xf0a3; icon-certificate</option>
<option>&#xf0a4; icon-hand-right</option>
<option>&#xf0a5; icon-hand-left</option>
<option>&#xf0a6; icon-hand-up</option>
<option>&#xf0a7; icon-hand-down</option>
<option>&#xf0a8; icon-circle-arrow-left</option>
<option>&#xf0a9; icon-circle-arrow-right</option>
<option>&#xf0aa; icon-circle-arrow-up</option>
<option>&#xf0ab; icon-circle-arrow-down</option>
<option>&#xf0ac; icon-globe</option>
<option>&#xf0ad; icon-wrench</option>
<option>&#xf0ae; icon-tasks</option>
<option>&#xf0b0; icon-filter</option>
<option>&#xf0b1; icon-briefcase</option>
<option>&#xf0b2; icon-fullscreen</option>
<option>&#xf0c0; icon-group</option>
<option>&#xf0c1; icon-link</option>
<option>&#xf0c2; icon-cloud</option>
<option>&#xf0c3; icon-beaker</option>
<option>&#xf0c4; icon-cut</option>
<option>&#xf0c5; icon-copy</option>
<option>&#xf0c6; icon-paper-clip</option>
<option>&#xf0c7; icon-save</option>
<option>&#xf0c8; icon-sign-blank</option>
<option>&#xf0c9; icon-reorder</option>
<option>&#xf0ca; icon-list-ul</option>
<option>&#xf0cb; icon-list-ol</option>
<option>&#xf0cc; icon-strikethrough</option>
<option>&#xf0cd; icon-underline</option>
<option>&#xf0ce; icon-table</option>
<option>&#xf0d0; icon-magic</option>
<option>&#xf0d1; icon-truck</option>
<option>&#xf0d2; icon-pinterest</option>
<option>&#xf0d3; icon-pinterest-sign</option>
<option>&#xf0d4; icon-google-plus-sign</option>
<option>&#xf0d5; icon-google-plus</option>
<option>&#xf0d6; icon-money</option>
<option>&#xf0d7; icon-caret-down</option>
<option>&#xf0d8; icon-caret-up</option>
<option>&#xf0d9; icon-caret-left</option>
<option>&#xf0da; icon-caret-right</option>
<option>&#xf0db; icon-columns</option>
<option>&#xf0dc; icon-sort</option>
<option>&#xf0dd; icon-sort-down</option>
<option>&#xf0de; icon-sort-up</option>
<option>&#xf0e0; icon-envelope</option>
<option>&#xf0e1; icon-linkedin</option>
<option>&#xf0e2; icon-undo</option>
<option>&#xf0e3; icon-legal</option>
<option>&#xf0e4; icon-dashboard</option>
<option>&#xf0e5; icon-comment-alt</option>
<option>&#xf0e6; icon-comments-alt</option>
<option>&#xf0e7; icon-bolt</option>
<option>&#xf0e8; icon-sitemap</option>
<option>&#xf0e9; icon-umbrella</option>
<option>&#xf0ea; icon-paste</option>
<option>&#xf0eb; icon-lightbulb</option>
<option>&#xf0ec; icon-exchange</option>
<option>&#xf0ed; icon-cloud-download</option>
<option>&#xf0ee; icon-cloud-upload</option>
<option>&#xf0f0; icon-user-md</option>
<option>&#xf0f1; icon-stethoscope</option>
<option>&#xf0f2; icon-suitcase</option>
<option>&#xf0f3; icon-bell-alt</option>
<option>&#xf0f4; icon-coffee</option>
<option>&#xf0f5; icon-food</option>
<option>&#xf0f6; icon-file-text-alt</option>
<option>&#xf0f7; icon-building</option>
<option>&#xf0f8; icon-hospital</option>
<option>&#xf0f9; icon-ambulance</option>
<option>&#xf0fa; icon-medkit</option>
<option>&#xf0fb; icon-fighter-jet</option>
<option>&#xf0fc; icon-beer</option>
<option>&#xf0fd; icon-h-sign</option>
<option>&#xf0fe; icon-plus-sign-alt</option>
<option>&#xf100; icon-double-angle-left</option>
<option>&#xf101; icon-double-angle-right</option>
<option>&#xf102; icon-double-angle-up</option>
<option>&#xf103; icon-double-angle-down</option>
<option>&#xf104; icon-angle-left</option>
<option>&#xf105; icon-angle-right</option>
<option>&#xf106; icon-angle-up</option>
<option>&#xf107; icon-angle-down</option>
<option>&#xf108; icon-desktop</option>
<option>&#xf109; icon-laptop</option>
<option>&#xf10a; icon-tablet</option>
<option>&#xf10b; icon-mobile-phone</option>
<option>&#xf10c; icon-circle-blank</option>
<option>&#xf10d; icon-quote-left</option>
<option>&#xf10e; icon-quote-right</option>
<option>&#xf110; icon-spinner</option>
<option>&#xf111; icon-circle</option>
<option>&#xf112; icon-reply</option>
<option>&#xf113; icon-github-alt</option>
<option>&#xf114; icon-folder-close-alt</option>
<option>&#xf115; icon-folder-open-alt</option>
<option>&#xf116; icon-expand-alt</option>
<option>&#xf117; icon-collapse-alt</option>
<option>&#xf118; icon-smile</option>
<option>&#xf119; icon-frown</option>
<option>&#xf11a; icon-meh</option>
<option>&#xf11b; icon-gamepad</option>
<option>&#xf11c; icon-keyboard</option>
<option>&#xf11d; icon-flag-alt</option>
<option>&#xf11e; icon-flag-checkered</option>
<option>&#xf120; icon-terminal</option>
<option>&#xf121; icon-code</option>
<option>&#xf122; icon-reply-all</option>
<option>&#xf122; icon-mail-reply-all</option>
<option>&#xf123; icon-star-half-empty</option>
<option>&#xf124; icon-location-arrow</option>
<option>&#xf125; icon-crop</option>
<option>&#xf126; icon-code-fork</option>
<option>&#xf127; icon-unlink</option>
<option>&#xf128; icon-question</option>
<option>&#xf129; icon-info</option>
<option>&#xf12a; icon-exclamation</option>
<option>&#xf12b; icon-superscript</option>
<option>&#xf12c; icon-subscript</option>
<option>&#xf12d; icon-eraser</option>
<option>&#xf12e; icon-puzzle-piece</option>
<option>&#xf130; icon-microphone</option>
<option>&#xf131; icon-microphone-off</option>
<option>&#xf132; icon-shield</option>
<option>&#xf133; icon-calendar-empty</option>
<option>&#xf134; icon-fire-extinguisher</option>
<option>&#xf135; icon-rocket</option>
<option>&#xf136; icon-maxcdn</option>
<option>&#xf137; icon-chevron-sign-left</option>
<option>&#xf138; icon-chevron-sign-right</option>
<option>&#xf139; icon-chevron-sign-up</option>
<option>&#xf13a; icon-chevron-sign-down</option>
<option>&#xf13b; icon-html5</option>
<option>&#xf13c; icon-css3</option>
<option>&#xf13d; icon-anchor</option>
<option>&#xf13e; icon-unlock-alt</option>
<option>&#xf140; icon-bullseye</option>
<option>&#xf141; icon-ellipsis-horizontal</option>
<option>&#xf142; icon-ellipsis-vertical</option>
<option>&#xf143; icon-rss-sign</option>
<option>&#xf144; icon-play-sign</option>
<option>&#xf145; icon-ticket</option>
<option>&#xf146; icon-minus-sign-alt</option>
<option>&#xf147; icon-check-minus</option>
<option>&#xf148; icon-level-up</option>
<option>&#xf149; icon-level-down</option>
<option>&#xf14a; icon-check-sign</option>
<option>&#xf14b; icon-edit-sign</option>
<option>&#xf14c; icon-external-link-sign</option>
<option>&#xf14d; icon-share-sign</option>
<option>&#xf14e; icon-compass</option>
<option>&#xf150; icon-collapse</option>
<option>&#xf151; icon-collapse-top</option>
<option>&#xf152; icon-expand</option>
<option>&#xf153; icon-eur</option>
<option>&#xf154; icon-gbp</option>
<option>&#xf155; icon-usd</option>
<option>&#xf156; icon-inr</option>
<option>&#xf157; icon-jpy</option>
<option>&#xf158; icon-cny</option>
<option>&#xf159; icon-krw</option>
<option>&#xf15a; icon-btc</option>
<option>&#xf15b; icon-file</option>
<option>&#xf15c; icon-file-text</option>
<option>&#xf15d; icon-sort-by-alphabet</option>
<option>&#xf15e; icon-sort-by-alphabet-alt</option>
<option>&#xf160; icon-sort-by-attributes</option>
<option>&#xf161; icon-sort-by-attributes-alt</option>
<option>&#xf162; icon-sort-by-order</option>
<option>&#xf163; icon-sort-by-order-alt</option>
<option>&#xf164; icon-thumbs-up</option>
<option>&#xf165; icon-thumbs-down</option>
<option>&#xf166; icon-youtube-sign</option>
<option>&#xf167; icon-youtube</option>
<option>&#xf168; icon-xing</option>
<option>&#xf169; icon-xing-sign</option>
<option>&#xf16a; icon-youtube-play</option>
<option>&#xf16b; icon-dropbox</option>
<option>&#xf16c; icon-stackexchange</option>
<option>&#xf16d; icon-instagram</option>
<option>&#xf16e; icon-flickr</option>
<option>&#xf170; icon-adn</option>
<option>&#xf171; icon-bitbucket</option>
<option>&#xf172; icon-bitbucket-sign</option>
<option>&#xf173; icon-tumblr</option>
<option>&#xf174; icon-tumblr-sign</option>
<option>&#xf175; icon-long-arrow-down</option>
<option>&#xf176; icon-long-arrow-up</option>
<option>&#xf177; icon-long-arrow-left</option>
<option>&#xf178; icon-long-arrow-right</option>
<option>&#xf179; icon-apple</option>
<option>&#xf17a; icon-windows</option>
<option>&#xf17b; icon-android</option>
<option>&#xf17c; icon-linux</option>
<option>&#xf17d; icon-dribbble</option>
<option>&#xf17e; icon-skype</option>
<option>&#xf180; icon-foursquare</option>
<option>&#xf181; icon-trello</option>
<option>&#xf182; icon-female</option>
<option>&#xf183; icon-male</option>
<option>&#xf184; icon-gittip</option>
<option>&#xf185; icon-sun</option>
<option>&#xf186; icon-moon</option>
<option>&#xf187; icon-archive</option>
<option>&#xf188; icon-bug</option>
<option>&#xf189; icon-vk</option>
<option>&#xf18a; icon-weibo</option>
<option>&#xf18b; icon-renren</option>
 </select>


 </body>
 </html>

its give u the output



1 comment:

  1. Not Working on Android with Firefox and IPhone with Safari

    ReplyDelete