前言
推薦到下面2個免費好用的字體圖標網站，下面以阿里巴巴矢量圖標庫舉例說明
1. 阿里巴巴矢量圖庫
2. Font Awsome
步驟
1. 登錄官網后，搜索要下載的圖標，鼠標指向該圖標后如下圖所示，點擊加入購物車圖標
2. 然后點擊右上角的購物車圖標后如下圖所示，選擇下載代碼
也可以選擇添加至項目，這樣會創建一個自定義文件夾，方便你后續新增下載圖標
3. 解壓下載代碼后打開文件夾，把紅色框中后綴為.ttf,woff,woff2的文件放入你項目中的font文件夾，
紅色圈的iconfont.css放入你項目中的css文件夾
4. 在項目中引入iconfont.css
在頁面中如下圖使用字體圖標對應class即可
如果不想在使用引入的每個字體圖標時，前面都加上 iconfront ，可以如下設置，
只要在class=''中'' 以icon-開頭 或 前面任意class類名 加上 icon-xxx 都會使用下面樣式
比如，<span class='icon-dianzan'></span>, <span class='test icon-dianzan'></span>
如果按照上述步驟依然無法顯示字體圖標，看看iconfont.css中紅色框部分路徑是否改為了你項目的路徑
改之前：
改之后：
如果此時仍然無法顯示字體圖標，看看是不是下面這種情況
下載代碼后默認confront.css的@font-face如下顯示
上面我也說了，需要把url里的默認路徑改為我們本地的路徑，關鍵來了，不要像下面這樣改，就是不要看到format里面是woff2,
就把前面字體文件路徑引入woff2，后面依次類推
就按照引入字體文件路徑時默認彈出的這個順序引入即可
另外，如果你按上述步驟創建了自定義項目文件夾，並下載了所需字體圖標，后來項目需要又要增加新的字體圖標這種情況，
需要把新增字體圖標也放進之前創建的自定義項目文件夾，然后重新下載代碼，並替換下面字體文件和confront.css
我之前還寫了一篇css如何在項目中引入自定義字體的文章，有需要的朋友可以看看！
有需要的朋友可以領取支付寶到店紅包，能省一點是一點
