前言

用過Elment的同鞋都知道，Element UI提供的字體圖符少之又少，實在是不夠用啊，幸好現在有不少豐富的第三方圖標庫可用，引入也不會很麻煩。

iconfont

iconfont 是阿里提供的一個圖標庫。

官方網址：http://www.iconfont.cn/

使用方法

方法一：傻瓜式引用，由于這種方法及其簡單 省去了很多繁瑣的步驟

　　a.引入項目生成的，圖標地址。

　　b.使用

推薦使用這種，詳情請看文檔！！文檔夠詳細的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

方法二：笨拙式引用

準備工作

1、先注冊，再登錄、找到圖標管理、我的項目

2、 點紫色的這個創建自己的項目

3、圖中畫紅線的地方很重要

　　1）、FontClass/Symbol前綴這個很重要，一定不要寫成：el-icon-***這樣的形式。

如果你寫成這樣的前綴，會和element-ui框架所帶的圖標（icon）沖突，導致你圖標顯示不出來

2）、FontFamily隨便起一個名字，你能記住就行

4、項目創建完了，你可以往項目里面添加自己想要的圖標了

1）、比如我想要一個設置的圖標

搜索之后能找出來好多不一樣的設置圖標，找到你想要的圖標，點擊添加入庫，當你點擊完之后，購物車會出現你剛才添加入庫的數量

點這個購物車

點添加至項目，這時候回彈出來你剛才創建好的項目，選中你剛創建好的項目，在點擊下面的

5、OK!!! 圖標添加完畢！！

找到我的項目->你剛才創建的那個項目->點擊下載到本地

6、你會得到一個壓縮包，打開這個壓縮包，里面有一些文件是沒用的。

畫紅線的留著，其他沒畫的可以刪除

搭建項目

　　1.在vue-cli、element-ui項目中，src文件夾->assets->文件夾下面創建名字為icon的文件夾

　　2.將上面第六步中畫紅線的文件拷貝到icon文件夾中。

　　3.找到項目中的main.js文件，導入iconfont.css樣式

　　4.打開iconfont.css文件你會看到，

上面的是，你創建項目時候定義的字體，下面的是你一會要引入的樣式類名（就是你想要的圖標）

　　5.ok我們這回終于可以引用圖標了

<span class="fontFamily hhtx-shezhi"></span>//記住別寫錯！！

在這里可以根據這個類名改變這個圖標的字體大小、顏色、、、、

我習慣用引入類名方式，當然還有icon="fontFamily hhtx-shezhi" 這種方式

　　6.效果展示

　　7.假如你還想要其他圖標，那就繼續往里面添加入庫，然后下載文件，找到有用的文件復制粘貼到icon文件夾里面來，一定要把之前的替換掉

參考

Vue、Element-ui項目中如何使用Iconfont(阿里圖標庫)

總結

以上是生活随笔為你收集整理的第三方图标库学习（一）iconfont的全部內容，希望文章能夠幫你解決所遇到的問題。

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