font awesome是一款功能強大的圖標字體庫程序,它可以被定制大小、顏色、陰影以及任何可以用CSS的樣式。font awesome包含人物、動物、建筑、商業(yè)、品牌等等各種主題豐富的圖標符號,可以通過相應的語法添加在 Markdown 文檔中,像 Emoji 一樣配合文字使用。
功能特色:
一套字庫, 675個圖標
FontAwesome是一種帶有網(wǎng)頁功能的象形文字語言,并收集在一個集合里。
不需要 JavaScript 支持
更少的兼容性問題,因為該字體不需要javascript
無限的擴展性
可縮放的矢量圖形,每個圖標在放大或者縮小的時候看起來都正常
完全開源免費
該字體是完全開源并且免費的,查看許可證.
CSS 控制
可以輕松的用css來控制字體的顏色,大小,陰影等!
完美支持Retina屏幕
字體是矢量圖,這意味著在高分辨率下也會完美顯示。
良好的兼容性
最初是為Bootstrap而設計的,現(xiàn)在Font Awesome適用于所有框架。
怎么裝點markdown文檔:
準備工作
要在 Markdown 文檔中輸入 Font Awesome,需要在文檔中任意位置貼粘入如下語句(可以放在文檔結(jié)尾處,以不影響直接在 Markdown 文檔中的閱讀):
<head> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> </head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
其中最后一行是表示此文檔需要導入 Font Awesome 最新版本 5.0.13(截止至 2018.06.11)的圖標符號,前面的四行是用于將 Font Awesome 4.x 版本的語句轉(zhuǎn)化為 5.0.13 版本。這是因為在 2017 年年底發(fā)布的 5.0 版本中,對 4.x 版本的大量圖標符號的名稱進行了重寫,加上此四行就可以同時使用 4.x 和 5.x 版本的語句。
插入符號
之后就可以直接插入各類 Font Awesome 符號了,其基礎用法是:
<i class="fa fa-weixin"></i>
這表示一個微信圖標的符號。直接把它寫入文檔中即可在編譯時得到如下效果:
微信和微博圖標符號
獲取符號名稱
在 Font Awesome 的符號列表中搜索,就可以得到不同的符號的寫法,點擊符號名稱右側(cè)的復制圖標,就可以復制它:
獲取人人圖標符號
獲取了常用的符號名稱,就可以把它保存在 TextExpander 或 LaunchBar 的 Snippets 等縮寫工具中,以備之后快速調(diào)用。
還有一個更簡單的方法,LaunchBar 中自帶了一個 Font Awesome Icons 的動作,可以在其中直接搜索 Font Awesome 符號的寫法,具體步驟是:
通過縮寫如 FONT 檢索到 Font Awesome Icons 動作,回車選擇;
通過縮寫檢索目標符號,如 GOOGLE;
找到后按 → 方向鍵,在出現(xiàn)的列表中移動光標至右邊標記為 HTML 的一行,按 ⌘Command-C 復制,再在文檔中貼粘。
LaunchBar 中的 Font Awesome Icons 動作
由于目前這個動作還并未隨 Font Awesome 5.0 的發(fā)布一起更新,其中只包含了 4.x 中 786 個圖標,且采用的是 4.x 版本的寫法。這也就是在上文中需要加入將 4.x 版本轉(zhuǎn)化為 5.0 版本的原因。
從此 LaunchBar 動作出復制出來的符號名稱,包含了一個 aria-hidden="true" 的代碼,它表示在讓電腦朗讀屏幕內(nèi)容時,忽略掉此符號,對顯示效果沒有影響。如果你沒有此需求,可保留此代碼,也可以刪掉。
修改符號格式
使用 Font Awesome 的另一個優(yōu)點是,除了上述簡單的符號調(diào)用,還可以對這些符號進行格式的修改,以實現(xiàn)更豐富的排版可能性。下面列舉幾個日常用得到的有趣格式。
調(diào)節(jié)尺寸
要調(diào)節(jié)符號的尺寸,只需對其名稱加上尺寸的參數(shù),例如,要調(diào)大上文所述的微信圖標符號的尺寸,只需把
<i class="fa fa-weixin"></i>
拓展寫為:
<i class="fa fa-weixin fa-2x"></i>
即可得到加大尺寸的符號。
放大的微信圖標
尺寸參數(shù)共有如下幾階,感興趣的話可以自行嘗試其效果:
fa-xs
fa-sm
fa-lg
fa-2x 至 fa-10x
轉(zhuǎn)動
通過在符號名稱中加入 fa-spin 就可以使符號變成動態(tài)的連貫轉(zhuǎn)動效果,通過 fa-pulse 也可以變成 8 步旋轉(zhuǎn)效果:
轉(zhuǎn)動的符號
引用符下沉
在本文最開始使用的例子中,在引文塊的最前面使用了如下代碼,即可實現(xiàn)引用符下沉的效果:
> <i class="fas fa-quote-left fa-3x fa-pull-left"></i>
其中,
fa-quote-left 是前引號,
fa-3x 表示符號尺寸,
fa-pull-left 表示使符號下沉。
引用符下沉