Font Awesome字體圖標庫
圖標指具有指代意義的圖形符號，具有高度濃縮並快捷傳達信息、便於記憶的特性。在軟件開發中，不管是web開發、桌面應用程序開發以及APP開發中，都離不開圖標。
本文給大家介紹兩種市面上比較好的圖標解決方案：[Font Awesome字體圖標庫](http://fontawesome.dashgame.com/#basic)以及[阿里巴巴矢量圖標庫](https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2)。
雖然網上還有其它可以下載圖標的地方，但是不推薦大家使用，原因有三：
【1】不是矢量圖片，放大後會失真。
【2】需要收費。
【3】不成體系，東拼西湊的圖標會大大降低可視化效果。
[Font Awesome字體圖標庫](http://fontawesome.dashgame.com/#basic)
01 介紹
Font Awesome是一套可縮放的矢量圖標庫，可以使用CSS屬性更改圖標大小、顏色、陰影或者其它任何支持的效果。目前常用的Font Awesome版本是4.7版本，新版本已更新到[Font Awesome 5.x版本](http://fa5.dashgame.com/#/)。
02 使用步驟
特別注意：Font Awesome從3.X、4.X到5.X版本，每次升級，包括圖標數量、CDN地址以及圖標的使用方式都會發生特別大的變化，所以使用前特別注意您使用的是哪個版本，此處我演示時使用的是最新版本5.11，如需使用4.x版本，則官網地址為：http://fontawesome.dashgame.com/#basic
步驟一：引入css資源
方式1：cdn引入
<code> Font Awesome/<code>
方式2：css下載到本地，標籤引入
<code>
Font Awesome
!/<code> 步驟二：在[官網](http://fa5.dashgame.com/#/%E5%9B%BE%E6%A0%87)中查看圖標樣式，並引入到標籤中
<code> Font Awesome
/<code>
如打開 Font Awesome 5 官網，即可看到所有圖標，如下圖
Font Awesome 5 官網
以上圖中第一排左二的'筆記本'圖標為例，
<code> /<code>
[阿里巴巴矢量圖標庫](https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2)
阿里巴巴矢量圖標庫中，是阿里巴巴官方使用的圖標庫，與Font Awesome相同的是，該網站中的圖標都是矢量圖標，放大後不會失真；不同的是，這些圖標是svg格式的圖片，不能使用CSS改變顏色，需要在下載時候手動選擇顏色。
阿里巴巴矢量圖標庫
使用方式：下載圖片，在HTML中引入即可
<code>html 阿里巴巴矢量圖標庫![]()
![]()
![]()
![]()
/<code>
根據我自己的使用情況來看，[Font Awesome字體圖標庫](http://fontawesome.dashgame.com/#basic)以及[阿里巴巴矢量圖標庫](https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2)都有非常好的使用效果，阿里巴巴矢量圖標庫的使用方法比較簡單，下載圖片後用`
