給html加入字體圖標

概述

iconfont字體圖標就是用字體來代替圖標、圖片文件的做法，並且通過字體圖標可以對圖標的大小、顏色等進行控制。
相對於圖片圖標，它減少請求次數，緩解服務器壓力。
html中想要用字體圖標的話，需要去下載圖標來使用。這里我們以國內的阿里巴巴矢量圖庫為例。

下載

1. 進入官網，注冊登錄，然后進入首頁，可以直接在首頁搜索你需要的圖標。如下圖：

或者直接圖標庫->官方圖標庫 如圖：

2. 找到，點擊進去，如圖：

3. 加入庫
   

4. 下載下來

5. 解壓，再把解壓的font_iyjbf80dvwi文件復制在項目根目錄下，如圖：

使用

打開font_iyjbf80dvwi文件

symbol引用

阿里平台推薦引用。

第一步：引入iconfont.js文件

第二步：加入通用的CSS代碼

第三步：選擇合適的圖標名應用於頁面。

具體操作看下圖：

運行，可以看到圖標出來啦