Font Awesome:图标字体,完全CSS控制

  Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter、facebook等等。用户可以自定义这些图标字体,包括大小、颜色、阴影效果以及其它可以通过CSS控制的属性。它有以下的优点:

  1. 1、像矢量图形一样,可以无限放大
  2. 2、只需一种字体,同时拥有多个图标,目前支持439个图标
  3. 3、无需考虑兼容性问题,fontawesome不依赖于javascript
  4. 4、通过CSS可以任意控制所有图标的大小 ,颜色,阴影。
  5. 5、由于fontawesome是矢量字体,可以完全兼容视网膜屏
  6. 6、能和Bootstrap等常用UI框架一起使用,良好兼容性
  7. 7、可以用于桌面应用中
  8. 8、不像其它字体那样, 它可以兼容屏幕阅读器。

  它的缺点是:

  1. 1、对IE6等浏览器兼容性不是很好,不过最新版本的Font Awesome和IE7完美兼容
  2. 2、要想用fontawesome,需要引入相关的字体文件,增加了网页大小

  下面是全部的Font Awesome图标:(鼠标放到图标上进行预览,点击预览图关闭预览)

  • glass "\f000"
  • music "\f001"
  • search "\f002"
  • envelope-o "\f003"
  • heart "\f004"
  • star "\f005"
  • star-o "\f006"
  • user "\f007"
  • film "\f008"
  • th-large "\f009"
  • th "\f00a"
  • th-list "\f00b"
  • check "\f00c"
  • times "\f00d"
  • search-plus "\f00e"
  • search-minus "\f010"
  • power-off "\f011"
  • signal "\f012"
  • cog "\f013"
  • trash-o "\f014"
  • home "\f015"
  • file-o "\f016"
  • clock-o "\f017"
  • road "\f018"
  • download "\f019"
  • arrow-circle-o-down "\f01a"
  • arrow-circle-o-up "\f01b"
  • inbox "\f01c"
  • play-circle-o "\f01d"
  • repeat "\f01e"
  • refresh "\f021"
  • list-alt "\f022"
  • lock "\f023"
  • flag "\f024"
  • headphones "\f025"
  • volume-off "\f026"
  • volume-down "\f027"
  • volume-up "\f028"
  • qrcode "\f029"
  • barcode "\f02a"
  • tag "\f02b"
  • tags "\f02c"
  • book "\f02d"
  • bookmark "\f02e"
  • print "\f02f"
  • camera "\f030"
  • font "\f031"
  • bold "\f032"
  • italic "\f033"
  • text-height "\f034"
  • text-width "\f035"
  • align-left "\f036"
  • align-center "\f037"
  • align-right "\f038"
  • align-justify "\f039"
  • list "\f03a"
  • outdent "\f03b"
  • indent "\f03c"
  • video-camera "\f03d"
  • picture-o "\f03e"
  • pencil "\f040"
  • map-marker "\f041"
  • adjust "\f042"
  • tint "\f043"
  • pencil-square-o "\f044"
  • share-square-o "\f045"
  • check-square-o "\f046"
  • arrows "\f047"
  • step-backward "\f048"
  • fast-backward "\f049"
  • backward "\f04a"
  • play "\f04b"
  • pause "\f04c"
  • stop "\f04d"
  • forward "\f04e"
  • fast-forward "\f050"
  • step-forward "\f051"
  • eject "\f052"
  • chevron-left "\f053"
  • chevron-right "\f054"
  • plus-circle "\f055"
  • minus-circle "\f056"
  • times-circle "\f057"
  • check-circle "\f058"
  • question-circle "\f059"
  • info-circle "\f05a"
  • crosshairs "\f05b"
  • times-circle-o "\f05c"
  • check-circle-o "\f05d"
  • ban "\f05e"
  • arrow-left "\f060"
  • arrow-right "\f061"
  • arrow-up "\f062"
  • arrow-down "\f063"
  • share "\f064"
  • expand "\f065"
  • compress "\f066"
  • plus "\f067"
  • minus "\f068"
  • asterisk "\f069"
  • exclamation-circle "\f06a"
  • gift "\f06b"
  • leaf "\f06c"
  • fire "\f06d"
  • eye "\f06e"
  • eye-slash "\f070"
  • exclamation-triangle "\f071"
  • plane "\f072"
  • calendar "\f073"
  • random "\f074"
  • comment "\f075"
  • magnet "\f076"
  • chevron-up "\f077"
  • chevron-down "\f078"
  • retweet "\f079"
  • shopping-cart "\f07a"
  • folder "\f07b"
  • folder-open "\f07c"
  • arrows-v "\f07d"
  • arrows-h "\f07e"
  • bar-chart-o "\f080"
  • twitter-square "\f081"
  • facebook-square "\f082"
  • camera-retro "\f083"
  • key "\f084"
  • cogs "\f085"
  • comments "\f086"
  • thumbs-o-up "\f087"
  • thumbs-o-down "\f088"
  • star-half "\f089"
  • heart-o "\f08a"
  • sign-out "\f08b"
  • linkedin-square "\f08c"
  • thumb-tack "\f08d"
  • external-link "\f08e"
  • sign-in "\f090"
  • trophy "\f091"
  • github-square "\f092"
  • upload "\f093"
  • lemon-o "\f094"
  • phone "\f095"
  • square-o "\f096"
  • bookmark-o "\f097"
  • phone-square "\f098"
  • twitter "\f099"
  • facebook "\f09a"
  • github "\f09b"
  • unlock "\f09c"
  • credit-card "\f09d"
  • rss "\f09e"
  • hdd-o "\f0a0"
  • bullhorn "\f0a1"
  • bell "\f0f3"
  • certificate "\f0a3"
  • hand-o-right "\f0a4"
  • hand-o-left "\f0a5"
  • hand-o-up "\f0a6"
  • hand-o-down "\f0a7"
  • arrow-circle-left "\f0a8"
  • arrow-circle-right "\f0a9"
  • arrow-circle-up "\f0aa"
  • arrow-circle-down "\f0ab"
  • globe "\f0ac"
  • wrench "\f0ad"
  • tasks "\f0ae"
  • filter "\f0b0"
  • briefcase "\f0b1"
  • arrows-alt "\f0b2"
  • users "\f0c0"
  • link "\f0c1"
  • cloud "\f0c2"
  • flask "\f0c3"
  • scissors "\f0c4"
  • files-o "\f0c5"
  • paperclip "\f0c6"
  • floppy-o "\f0c7"
  • square "\f0c8"
  • bars "\f0c9"
  • list-ul "\f0ca"
  • list-ol "\f0cb"
  • strikethrough "\f0cc"
  • underline "\f0cd"
  • table "\f0ce"
  • magic "\f0d0"
  • truck "\f0d1"
  • pinterest "\f0d2"
  • pinterest-square "\f0d3"
  • google-plus-square "\f0d4"
  • google-plus "\f0d5"
  • money "\f0d6"
  • caret-down "\f0d7"
  • caret-up "\f0d8"
  • caret-left "\f0d9"
  • caret-right "\f0da"
  • columns "\f0db"
  • sort "\f0dc"
  • sort-asc "\f0dd"
  • sort-desc "\f0de"
  • envelope "\f0e0"
  • linkedin "\f0e1"
  • undo "\f0e2"
  • gavel "\f0e3"
  • tachometer "\f0e4"
  • comment-o "\f0e5"
  • comments-o "\f0e6"
  • bolt "\f0e7"
  • sitemap "\f0e8"
  • umbrella "\f0e9"
  • clipboard "\f0ea"
  • lightbulb-o "\f0eb"
  • exchange "\f0ec"
  • cloud-download "\f0ed"
  • cloud-upload "\f0ee"
  • user-md "\f0f0"
  • stethoscope "\f0f1"
  • suitcase "\f0f2"
  • bell-o "\f0a2"
  • coffee "\f0f4"
  • cutlery "\f0f5"
  • file-text-o "\f0f6"
  • building-o "\f0f7"
  • hospital-o "\f0f8"
  • ambulance "\f0f9"
  • medkit "\f0fa"
  • fighter-jet "\f0fb"
  • beer "\f0fc"
  • h-square "\f0fd"
  • plus-square "\f0fe"
  • angle-double-left "\f100"
  • angle-double-right "\f101"
  • angle-double-up "\f102"
  • angle-double-down "\f103"
  • angle-left "\f104"
  • angle-right "\f105"
  • angle-up "\f106"
  • angle-down "\f107"
  • desktop "\f108"
  • laptop "\f109"
  • tablet "\f10a"
  • mobile "\f10b"
  • circle-o "\f10c"
  • quote-left "\f10d"
  • quote-right "\f10e"
  • spinner "\f110"
  • circle "\f111"
  • reply "\f112"
  • github-alt "\f113"
  • folder-o "\f114"
  • folder-open-o "\f115"
  • smile-o "\f118"
  • frown-o "\f119"
  • meh-o "\f11a"
  • gamepad "\f11b"
  • keyboard-o "\f11c"
  • flag-o "\f11d"
  • flag-checkered "\f11e"
  • terminal "\f120"
  • code "\f121"
  • reply-all "\f122"
  • mail-reply-all "\f122"
  • star-half-o "\f123"
  • location-arrow "\f124"
  • crop "\f125"
  • code-fork "\f126"
  • chain-broken "\f127"
  • question "\f128"
  • info "\f129"
  • exclamation "\f12a"
  • superscript "\f12b"
  • subscript "\f12c"
  • eraser "\f12d"
  • puzzle-piece "\f12e"
  • microphone "\f130"
  • microphone-slash "\f131"
  • shield "\f132"
  • calendar-o "\f133"
  • fire-extinguisher "\f134"
  • rocket "\f135"
  • maxcdn "\f136"
  • chevron-circle-left "\f137"
  • chevron-circle-right "\f138"
  • chevron-circle-up "\f139"
  • chevron-circle-down "\f13a"
  • html5 "\f13b"
  • css3 "\f13c"
  • anchor "\f13d"
  • unlock-alt "\f13e"
  • bullseye "\f140"
  • ellipsis-h "\f141"
  • ellipsis-v "\f142"
  • rss-square "\f143"
  • play-circle "\f144"
  • ticket "\f145"
  • minus-square "\f146"
  • minus-square-o "\f147"
  • level-up "\f148"
  • level-down "\f149"
  • check-square "\f14a"
  • pencil-square "\f14b"
  • external-link-square "\f14c"
  • share-square "\f14d"
  • compass "\f14e"
  • caret-square-o-down "\f150"
  • caret-square-o-up "\f151"
  • caret-square-o-right "\f152"
  • eur "\f153"
  • gbp "\f154"
  • usd "\f155"
  • inr "\f156"
  • jpy "\f157"
  • rub "\f158"
  • krw "\f159"
  • btc "\f15a"
  • file "\f15b"
  • file-text "\f15c"
  • sort-alpha-asc "\f15d"
  • sort-alpha-desc "\f15e"
  • sort-amount-asc "\f160"
  • sort-amount-desc "\f161"
  • sort-numeric-asc "\f162"
  • sort-numeric-desc "\f163"
  • thumbs-up "\f164"
  • thumbs-down "\f165"
  • youtube-square "\f166"
  • youtube "\f167"
  • xing "\f168"
  • xing-square "\f169"
  • youtube-play "\f16a"
  • dropbox "\f16b"
  • stack-overflow "\f16c"
  • instagram "\f16d"
  • flickr "\f16e"
  • adn "\f170"
  • bitbucket "\f171"
  • bitbucket-square "\f172"
  • tumblr "\f173"
  • tumblr-square "\f174"
  • long-arrow-down "\f175"
  • long-arrow-up "\f176"
  • long-arrow-left "\f177"
  • long-arrow-right "\f178"
  • apple "\f179"
  • windows "\f17a"
  • android "\f17b"
  • linux "\f17c"
  • dribbble "\f17d"
  • skype "\f17e"
  • foursquare "\f180"
  • trello "\f181"
  • female "\f182"
  • male "\f183"
  • gittip "\f184"
  • sun-o "\f185"
  • moon-o "\f186"
  • archive "\f187"
  • bug "\f188"
  • vk "\f189"
  • weibo "\f18a"
  • renren "\f18b"
  • pagelines "\f18c"
  • stack-exchange "\f18d"
  • arrow-circle-o-right "\f18e"
  • arrow-circle-o-left "\f190"
  • caret-square-o-left "\f191"
  • dot-circle-o "\f192"
  • wheelchair "\f193"
  • vimeo-square "\f194"
  • try "\f195"
  • plus-square-o "\f196"