Font Awesome，原只為Bootstrap而設計的字體圖標，不過，現在你可以單獨用它來為你的網站工作。丟掉圖片圖標吧，一起來用Font Awesome！Font Awesome幾乎囊括了網頁中可能用到的所有圖標，這些圖標通過Web Font的方式來顯示，可以被任意縮放、改變顏色，你可以像修改文字樣式那樣來修改圖標樣式。

Font Awesome 特性：

1、一個字體文件， 249 個圖標。

2、用CSS控制樣式。

3、無限縮放。

4、個人、商業均可自由使用。

5、支持IE7+。

6、在Retina屏幕上也能完美呈現。

7、設計師的助手。

8、兼容屏幕閱讀器。

Font Awesome的使用：

1、先下載Font Awesome字體樣式文件和字體。CSS樣式文件下載清點這里，字體下載請點這里

2、將下載的字體和CSS樣式文件拷貝到你的項目目錄中去。

3、隨便選擇一個CSS樣式文件，你可以選擇font-awesome.less或者font-awesome.min.css作為你的圖標樣式文件。

4、打開你所選擇的樣式文件，編輯樣式文件中的字體路徑，當然這個路徑是針對你css樣式文件位置來確定的。

5、在你的項目中引用樣式文件即可。
例如：
<link rel=”stylesheet” href=”../css/font-awesome.min.css”>
or
<link rel=”stylesheet” href=”../css/font-awesome.css”>
如需兼容IE瀏覽器，那請下載font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在項目中引入該樣式文件。
<!–[if IE 7]>
<link rel=”stylesheet” href=”assets/css/font-awesome-ie7.min.css”>
<![endif]–>

6、在你需要使用這些圖標的地方加上一個html標簽，給該標簽一個class屬性，屬性值請參閱以下 Font Awesome圖片集。

引用方式：?class=”fa fa-home”

4.0新加入的10種Icons

?fa-rub ?fa-ruble?(別稱) ?fa-rouble?(別稱) ?fa-pagelines ?fa-stack-exchange ?fa-arrow-circle-o-right ?fa-arrow-circle-o-left ?fa-caret-square-o-left ?fa-toggle-left?(別稱) ?fa-dot-circle-o ?fa-wheelchair ?fa-vimeo-square ?fa-try ?fa-turkish-lira?(別稱)

Web應用Icons

?fa-adjust ?fa-anchor ?fa-archive ?fa-asterisk ?fa-ban ?fa-bar-chart-o ?fa-barcode ?fa-beer ?fa-bell ?fa-bell-o ?fa-bolt ?fa-book ?fa-bookmark ?fa-bookmark-o ?fa-briefcase ?fa-bug ?fa-building ?fa-bullhorn ?fa-bullseye ?fa-calendar ?fa-calendar-o ?fa-camera ?fa-camera-retro ?fa-caret-square-o-down ?fa-caret-square-o-left ?fa-caret-square-o-right ?fa-caret-square-o-up ?fa-certificate ?fa-check ?fa-check-circle ?fa-check-circle-o ?fa-check-square ?fa-check-square-o ?fa-circle ?fa-circle-o ?fa-clock-o ?fa-cloud ?fa-cloud-download ?fa-cloud-upload ?fa-code ?fa-code-fork ?fa-coffee ?fa-cog ?fa-cogs ?fa-collapse-o ?fa-comment ?fa-comment-o ?fa-comments ?fa-comments-o ?fa-compass ?fa-credit-card ?fa-crop ?fa-crosshairs ?fa-cutlery ?fa-dashboard?(別稱) ?fa-desktop ?fa-dot-circle-o ?fa-download ?fa-edit?(別稱) ?fa-ellipsis-horizontal ?fa-ellipsis-vertical ?fa-envelope ?fa-envelope-o ?fa-eraser ?fa-exchange ?fa-exclamation ?fa-exclamation-circle ?fa-exclamation-triangle ?fa-expand-o ?fa-external-link ?fa-external-link-square ?fa-eye ?fa-eye-slash ?fa-female ?fa-fighter-jet ?fa-film ?fa-filter ?fa-fire ?fa-fire-extinguisher ?fa-flag ?fa-flag-checkered ?fa-flag-o ?fa-flash?(別稱) ?fa-flask ?fa-folder ?fa-folder-o ?fa-folder-open ?fa-folder-open-o ?fa-frown-o ?fa-gamepad ?fa-gavel ?fa-gear?(別稱) ?fa-gears?(別稱) ?fa-gift ?fa-glass ?fa-globe ?fa-group ?fa-hdd-o ?fa-headphones ?fa-heart ?fa-heart-o ?fa-home ?fa-inbox ?fa-info ?fa-info-circle ?fa-key ?fa-keyboard-o ?fa-laptop ?fa-leaf ?fa-legal?(別稱) ?fa-lemon-o ?fa-level-down ?fa-level-up ?fa-lightbulb-o ?fa-location-arrow ?fa-lock ?fa-magic ?fa-magnet ?fa-mail-forward?(別稱) ?fa-mail-reply?(別稱) ?fa-mail-reply-all ?fa-male ?fa-map-marker ?fa-meh-o ?fa-microphone ?fa-microphone-slash ?fa-minus ?fa-minus-circle ?fa-minus-square ?fa-minus-square-o ?fa-mobile ?fa-mobile-phone?(別稱) ?fa-money ?fa-moon-o ?fa-move ?fa-music ?fa-pencil ?fa-pencil-square ?fa-pencil-square-o ?fa-phone ?fa-phone-square ?fa-picture-o ?fa-plane ?fa-plus ?fa-plus-circle ?fa-plus-square ?fa-power-off ?fa-print ?fa-puzzle-piece ?fa-qrcode ?fa-question ?fa-question-circle ?fa-quote-left ?fa-quote-right ?fa-random ?fa-refresh ?fa-reorder ?fa-reply ?fa-reply-all ?fa-resize-horizontal ?fa-resize-vertical ?fa-retweet ?fa-road ?fa-rocket ?fa-rss ?fa-rss-square ?fa-search ?fa-search-minus ?fa-search-plus ?fa-share ?fa-share-square ?fa-share-square-o ?fa-shield ?fa-shopping-cart ?fa-sign-in ?fa-sign-out ?fa-signal ?fa-sitemap ?fa-smile-o ?fa-sort ?fa-sort-alpha-asc ?fa-sort-alpha-desc ?fa-sort-amount-asc ?fa-sort-amount-desc ?fa-sort-asc ?fa-sort-desc ?fa-sort-down?(別稱) ?fa-sort-numeric-asc ?fa-sort-numeric-desc ?fa-sort-up?(別稱) ?fa-spinner ?fa-square ?fa-square-o ?fa-star ?fa-star-half ?fa-star-half-empty?(別稱) ?fa-star-half-full?(別稱) ?fa-star-half-o ?fa-star-o ?fa-subscript ?fa-suitcase ?fa-sun-o ?fa-superscript ?fa-tablet ?fa-tachometer ?fa-tag ?fa-tags ?fa-tasks ?fa-terminal ?fa-thumb-tack ?fa-thumbs-down ?fa-thumbs-o-down ?fa-thumbs-o-up ?fa-thumbs-up ?fa-ticket ?fa-times ?fa-times-circle ?fa-times-circle-o ?fa-tint ?fa-toggle-down?(別稱) ?fa-toggle-left?(別稱) ?fa-toggle-right?(別稱) ?fa-toggle-up?(別稱) ?fa-trash-o ?fa-trophy ?fa-truck ?fa-umbrella ?fa-unlock ?fa-unlock-o ?fa-unsorted?(別稱) ?fa-upload ?fa-user ?fa-video-camera ?fa-volume-down ?fa-volume-off ?fa-volume-up ?fa-warning?(別稱) ?fa-wheelchair ?fa-wrench

表單管理Icons

?fa-check-square ?fa-check-square-o ?fa-circle ?fa-circle-o ?fa-dot-circle-o ?fa-minus-square ?fa-minus-square-o ?fa-square ?fa-square-o

貨幣Icons

?fa-bitcoin?(別稱) ?fa-btc ?fa-cny?(別稱) ?fa-dollar?(別稱) ?fa-eur ?fa-euro?(別稱) ?fa-gbp ?fa-inr ?fa-jpy ?fa-krw ?fa-money ?fa-rmb?(別稱) ?fa-rouble?(別稱) ?fa-rub ?fa-ruble?(別稱) ?fa-rupee?(別稱) ?fa-try ?fa-turkish-lira?(別稱) ?fa-usd ?fa-won?(別稱) ?fa-yen?(別稱)

文本編輯Icons

?fa-align-center ?fa-align-justify ?fa-align-left ?fa-align-right ?fa-bold ?fa-chain?(別稱) ?fa-chain-broken ?fa-clipboard ?fa-columns ?fa-copy?(別稱) ?fa-cut?(別稱) ?fa-dedent?(別稱) ?fa-eraser ?fa-file ?fa-file-o ?fa-file-text ?fa-file-text-o ?fa-files-o ?fa-floppy-o ?fa-font ?fa-indent ?fa-italic ?fa-link ?fa-list ?fa-list-alt ?fa-list-ol ?fa-list-ul ?fa-outdent ?fa-paperclip ?fa-paste?(別稱) ?fa-repeat ?fa-rotate-left?(別稱) ?fa-rotate-right?(別稱) ?fa-save?(別稱) ?fa-scissors ?fa-strikethrough ?fa-table ?fa-text-height ?fa-text-width ?fa-th ?fa-th-large ?fa-th-list ?fa-underline ?fa-undo ?fa-unlink?(別稱)

方向Icons

?fa-angle-double-down ?fa-angle-double-left ?fa-angle-double-right ?fa-angle-double-up ?fa-angle-down ?fa-angle-left ?fa-angle-right ?fa-angle-up ?fa-arrow-circle-down ?fa-arrow-circle-left ?fa-arrow-circle-o-down ?fa-arrow-circle-o-left ?fa-arrow-circle-o-right ?fa-arrow-circle-o-up ?fa-arrow-circle-right ?fa-arrow-circle-up ?fa-arrow-down ?fa-arrow-left ?fa-arrow-right ?fa-arrow-up ?fa-caret-down ?fa-caret-left ?fa-caret-right ?fa-caret-square-o-down ?fa-caret-square-o-left ?fa-caret-square-o-right ?fa-caret-square-o-up ?fa-caret-up ?fa-chevron-circle-down ?fa-chevron-circle-left ?fa-chevron-circle-right ?fa-chevron-circle-up ?fa-chevron-down ?fa-chevron-left ?fa-chevron-right ?fa-chevron-up ?fa-hand-o-down ?fa-hand-o-left ?fa-hand-o-right ?fa-hand-o-up ?fa-long-arrow-down ?fa-long-arrow-left ?fa-long-arrow-right ?fa-long-arrow-up ?fa-toggle-down?(別稱) ?fa-toggle-left?(別稱) ?fa-toggle-right?(別稱) ?fa-toggle-up?(別稱)

視頻播放器Icons

?fa-backward ?fa-eject ?fa-fast-backward ?fa-fast-forward ?fa-forward ?fa-fullscreen ?fa-pause ?fa-play ?fa-play-circle ?fa-play-circle-o ?fa-resize-full ?fa-resize-small ?fa-step-backward ?fa-step-forward ?fa-stop ?fa-youtube-play

品牌Icons

?fa-adn ?fa-android ?fa-apple ?fa-bitbucket ?fa-bitbucket-square ?fa-bitcoin?(別稱) ?fa-btc ?fa-css3 ?fa-dribbble ?fa-dropbox ?fa-facebook ?fa-facebook-square ?fa-flickr ?fa-foursquare ?fa-github ?fa-github-alt ?fa-github-square ?fa-gittip ?fa-google-plus ?fa-google-plus-square ?fa-html5 ?fa-instagram ?fa-linkedin ?fa-linkedin-square ?fa-linux ?fa-maxcdn ?fa-pagelines ?fa-pinterest ?fa-pinterest-square ?fa-renren ?fa-skype ?fa-stack-exchange ?fa-stack-overflow ?fa-trello ?fa-tumblr ?fa-tumblr-square ?fa-twitter ?fa-twitter-square ?fa-vimeo-square ?fa-vk ?fa-weibo ?fa-windows ?fa-xing ?fa-xing-square ?fa-youtube ?fa-youtube-play ?fa-youtube-square

醫療Icons

?fa-ambulance ?fa-h-square ?fa-hospital-o ?fa-medkit ?fa-plus-square ?fa-stethoscope ?fa-user-md ?fa-wheelchair
from:?http://www.fromars.com/11240.html 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的关于Font Awesome图标的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。