我們使用element-ui、vue開發網站的時候，往往圖示是起著很重要的作用。

2018-11-9更新

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

a.引入專案生成的，圖示地址。

2.笨拙式引用：

    準備工作

        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資料夾裡面來，一定要把之前的替換掉

總結

        引入的圖示是不是比你平時引入的img高大尚很多，它還可以支援css的語法，檔案體積還小，還可以讓其不和element-ui圖示衝突，趕快入手吧！

這是我的微信公眾號：

不定期更新前端知識