Hi逆趣！大家好呀荆几！我是你們努力的喵哥吓妆！
在我們工作中或者做個(gè)人的小產(chǎn)品時(shí)，我們通常會(huì)使用很多圖標(biāo)來(lái)增強(qiáng)產(chǎn)品的視覺效果和易用性伴郁。大家常用的方法就是去阿里巴巴的 Iconfont 網(wǎng)站下載圖標(biāo)耿战，然后嵌入到自己的產(chǎn)品當(dāng)中。
但是 Iconfont 的圖標(biāo)對(duì)于個(gè)人或者公司作為商業(yè)用途時(shí)存在一些問(wèn)題焊傅。Iconfont 如果需要商業(yè)使用剂陡，是需要聯(lián)系平臺(tái)獲得商業(yè)授權(quán)的。同時(shí)狐胎，由于作者可以自由上傳圖標(biāo)鸭栖。這也是存在商業(yè)使用的風(fēng)險(xiǎn)的。
所以握巢，喵哥今天就給大家推薦開源項(xiàng)目 Font Awesome晕鹊。Font Awesome 是非常豐富的圖標(biāo)的矢量圖標(biāo)庫(kù)，且還包含對(duì)應(yīng)工具箱的 CSS 框架。Font Awesome 提供的圖標(biāo)可以被定制大小溅话、顏色晓锻、陰影以及任何可以用CSS的樣式。
特點(diǎn)
一套字庫(kù), 675個(gè)圖標(biāo)
不需要 JavaScript 支持
? ? ? ?更少的兼容性問(wèn)題飞几，因?yàn)樵撟煮w不需要javascript砚哆。
無(wú)限的擴(kuò)展性
? ? ? ?可縮放的矢量圖形，每個(gè)圖標(biāo)在放大或者縮小的時(shí)候看起來(lái)都正常屑墨。
完全開源免費(fèi)
? ? ? ?該字體是完全開源并且免費(fèi)的躁锁。
CSS 控制
? ? ? ?可以輕松的用css來(lái)控制字體的顏色，大小卵史，陰影等战转！
完美支持Retina屏幕
? ? ? ?字體是矢量圖，這意味著在高分辨率下也會(huì)完美顯示以躯。
良好的兼容性
最初是為Bootstrap而設(shè)計(jì)的槐秧，現(xiàn)在Font Awesome適用于所有框架。
兼容桌面級(jí)應(yīng)用
安裝
使用 CSS
1. 復(fù)制 font-awesome 目錄到你的項(xiàng)目中
2.?在?<head>處加載font-awesome.min.css如下寸潦。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">使用 Sass or Less
使用 LESS or SASS 來(lái)個(gè)性化自定義Font Awesome 4.7.0
1. 復(fù)制 font-awesome/ 目錄到你的項(xiàng)目中色鸳。
2. 打開你項(xiàng)目中的?font-awesome/less/variables.less 或 font-awesome/scss/_variables.scss。
然后編輯?@fa-font-path 或?$fa-font-path 變量來(lái)指定字體目錄见转。@fa-font-path:? ?"../font"命雀。
字體的路徑是相對(duì)于你CSS目錄的。
3. 如果你使用一個(gè)靜態(tài)編譯器斩箫，請(qǐng)重新編譯你的 LESS 或 SASS吏砂。
使用
基礎(chǔ)圖標(biāo)
你可以通過(guò)設(shè)置CSS前綴fa和圖標(biāo)的具體名稱，來(lái)把Font Awesome 圖標(biāo)放在任意位置乘客。Font Awesome 被設(shè)計(jì)為用于行內(nèi)元素（我們喜歡用更簡(jiǎn)短的標(biāo)簽狐血，它的語(yǔ)義更加精準(zhǔn)）。
fa-camera-retro- 例如: 默認(rèn)圖標(biāo)如果您修改了圖標(biāo)容器的字體大小易核，圖標(biāo)大小會(huì)隨之改變匈织。同樣也適用于顏色，陰影牡直，陰影等其它任何CSS支持的效果上运吓。
大圖標(biāo)
為了增加圖標(biāo)大小相對(duì)于它們的容器, 使用 fa-lg (33% 遞增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.
fa-lgfa-2xfa-3xfa-4xfa-5x
如果你的圖標(biāo)頂部和底部被裁剪掉佛点，請(qǐng)確保你有足夠的行高。
導(dǎo)航圖標(biāo)
使用 fa-fw 來(lái)設(shè)置圖標(biāo)在一個(gè)固定寬度內(nèi)牌废，主要用于不同寬度圖標(biāo)無(wú)法對(duì)齊的情況隘庄，尤其在列表或?qū)Ш綍r(shí)起到重要作用姑荷。
<div class="list-group"><a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> 首頁(yè)</a><a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> 關(guān)于我們</a><a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> 后臺(tái)應(yīng)用編輯</a><a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> 系統(tǒng)設(shè)置</a></div>
列表圖標(biāo)
使用 fa-ul and fa-li 輕松的替換無(wú)序列表中的默認(rèn)圖標(biāo)髓抑。
<ul class="fa-ul"><li><i class="fa-li fa fa-check-square"></i>使用列表類圖標(biāo)</li><li><i class="fa-li fa fa-check-square"></i>輕松的替換</li><li><i class="fa-li fa fa-spinner fa-spin"></i>無(wú)序列表</li><li><i class="fa-li fa fa-square"></i>中的默認(rèn)圖標(biāo)</li></ul>
邊框與內(nèi)嵌圖標(biāo)
使用 fa-border 和 fa-pull-right 或 fa-pull-left 可以輕易構(gòu)造出引用的特殊效果嘴拢。
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>...獨(dú)坐在路邊街角 冷風(fēng)吹醒胜榔，默默地伴著我的孤影，只想將結(jié)他緊抱湃番，訴出辛酸夭织，就在這刻想起往事，心中一股沖勁勇闖牵辣，拋開那現(xiàn)實(shí)沒有顧慮摔癣，仿佛身邊擁有一切奴饮，看似與別人筑起隔膜纬向。
動(dòng)畫圖標(biāo)
使用 fa-spin 使任意圖標(biāo)旋轉(zhuǎn)，還可以使用 fa-pulse 使其進(jìn)行8方位旋轉(zhuǎn)戴卜。尤其適合 fa-spinner, fa-refresh, 和 fa-cog逾条。
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span><i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span><i class="fa fa-cog fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span>
溫馨提示: 動(dòng)畫圖標(biāo)會(huì)在一些平臺(tái)的瀏覽器中出現(xiàn)抖動(dòng)的效果，可參見 問(wèn)題列表#671 中的例子來(lái)解決此問(wèn)題投剥。
圖標(biāo)旋轉(zhuǎn)
若要對(duì)圖標(biāo)進(jìn)行任意旋轉(zhuǎn)和翻轉(zhuǎn), 可以使用 fa-rotate-* and fa-flip-* 類.
<i class="fa fa-shield"></i> normal<br><i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br><i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br><i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br><i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br><i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
組合圖標(biāo)
如果想要將多個(gè)圖標(biāo)組合起來(lái)师脂，使用fa-stack類，作為父容器江锨，fa-stack-1x作為正常比例的圖標(biāo)吃警，fa-stack-2x作為大一些的圖標(biāo)。還可以使用fa-inverse類來(lái)切換圖標(biāo)顏色啄育。您可以在父容器中 通過(guò)添加 larger icon 類來(lái)控制整體大小酌心。
<span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span>fa-twitter on fa-square-o<br><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i></span>fa-flag on fa-circle<br><span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span>fa-terminal on fa-square<br><span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span>fa-ban on fa-camera
最后
Font Awesome 的作者是開源組織 FortAwesome。FortAwesome 旨在開發(fā)幫助大家做更好 Web 程序的工具挑豌。Font Awesome 開源在 Github 已三年多安券，共收獲了 63.5k Star。Font Awesome 單單在 Github 就有8300多的使用者氓英，是 Github 非澈蠲悖火熱的項(xiàng)目。
項(xiàng)目地址：https://github.com/FortAwesome/Font-Awesome
在線文檔：https://fontawesome.dashgame.com/
