圖標指具有指代意義的圖形符號,具有高度濃縮並快捷傳達信息、便於記憶的特性。在軟件開發中,不管是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 官網,即可看到所有圖標,如下圖
以上圖中第一排左二的'筆記本'圖標為例,
<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)都有非常好的使用效果,阿里巴巴矢量圖標庫的使用方法比較簡單,下載圖片後用`