在前端頁面中會(huì)經(jīng)常需要用到圖標(biāo)。很多時(shí)候前端開發(fā)人員會(huì)根據(jù)UI設(shè)計(jì)師提供的素材直接進(jìn)行引進(jìn)，但是圖片會(huì)占據(jù)較大的內(nèi)存，尤其在移動(dòng)端，不利于用戶體驗(yàn)。那么今天就整理一下前端使用字體圖標(biāo)的方法和過程。
1、首先進(jìn)入字體圖標(biāo)官網(wǎng)：http://www.iconfont.cn/
2、然后在圖標(biāo)庫或者搜索欄搜索自己需要的圖標(biāo),如圖所示：
圖1-搜索需要的圖標(biāo)
對(duì)應(yīng)的搜索結(jié)果如圖所示：
圖2-搜索結(jié)果示例.png
3、鼠標(biāo)指向任意一個(gè)圖標(biāo)，會(huì)出現(xiàn)如下頁面，對(duì)圖標(biāo)可進(jìn)行三個(gè)操作，三個(gè)圖標(biāo)分別對(duì)應(yīng)①添加入庫，②收藏，③下載。
圖3-選中一個(gè)圖標(biāo).png
我們需要的功能就是第一個(gè)，添加入庫。
ps:如果想要以圖片的方式直接使用圖標(biāo)，可點(diǎn)擊下載，之后出現(xiàn)如下界面：
圖4-下載字體圖標(biāo).png
其中除了可以下載png格式、AI格式、還有svg格式外，還可以對(duì)圖標(biāo)進(jìn)行編輯操作，更改其顏色和大小。
4、鼠標(biāo)指向圖標(biāo)，選擇“添加入庫”功能，這時(shí)候就可以在右上角的小購物車中看到剛剛添加的圖標(biāo)了。
圖5-加入到庫.png
然后點(diǎn)擊右上角的"購物車"，可以看到剛才加入的字體圖標(biāo)以及下面的功能選項(xiàng)。
圖6-庫中的字體圖標(biāo).png
圖7-對(duì)庫中圖標(biāo)進(jìn)行操作.png
此時(shí)我們選擇下載代碼，之后可以得到一個(gè)壓縮包。
5、壓縮包解壓內(nèi)容如圖所示：
圖8-下載的代碼包內(nèi)容.png
6、下面我們就可以在自己的項(xiàng)目中引進(jìn)這其中有用的代碼文件，然后輕松的使用圖標(biāo)了。
分析上面代碼包中的文件，demo.css就相當(dāng)于我們平時(shí)用的reset.css，即重置樣式表。其中的3個(gè)demo_xx.html文件分別演示引進(jìn)字體圖標(biāo)的3個(gè)方法：fontclass、symbol、unicode。我們現(xiàn)在多用(今天講的也是）第一種方法，即fontclass方法，這是在三種里面相對(duì)較為簡單的一種方法。
圖9-三種引進(jìn)字體圖標(biāo)的方法.png
1）首先在自己的html文件中引入iconfont.css樣式表文件：
圖10-在自己的項(xiàng)目中引入iconfont.css文件.png
代碼如下：
<!--引進(jìn)字體圖標(biāo)文件-->
<link rel="stylesheet" href="../css/iconfont/weibo/iconfont.css">
<!--引進(jìn)字體圖標(biāo)文件-->
<link rel="stylesheet" href="../css/iconfont/weixin/iconfont.css">
注意此文件中有關(guān)聯(lián)文件，即字體的格式文件，所以在將iconfont.css文件放入項(xiàng)目時(shí)，也需將另外三個(gè)字體格式文件一并放入。
圖11-需要同時(shí)放入的4個(gè)文件.png
2）接著在哪需要用到此圖標(biāo)，就用i標(biāo)簽，然后設(shè)置相應(yīng)的類名即可。
<!--搜索圖標(biāo)-->
<i class=" iconfont icon-wxbsousuotuiguang"></i>
總結(jié)：整個(gè)的過程需要做的就是三步：
(1)將下載的壓縮包中的下面四個(gè)文件放到自己的項(xiàng)目中去；
圖12-css文件夾中放置的文件.png
(2)在需要用到字體圖標(biāo)的頁面中引進(jìn)iconfont.css文件；
<!--引進(jìn)字體圖標(biāo)文件-->
<link rel="stylesheet" href="../css/iconfont/weixin/iconfont.css">
(3)在使用字體圖標(biāo)的地方，設(shè)置相應(yīng)字體的類。
<!--搜索圖標(biāo)-->
<i class=" iconfont icon-wxbsousuotuiguang"></i>
設(shè)置類時(shí)，都需要設(shè)置iconfont，然后根據(jù)iconfont.css文件中最后寫到的對(duì)應(yīng)具體某一字體圖標(biāo)的類名再設(shè)置。
圖13-字體圖標(biāo)的類名位置(在iconfont.css文件中的最后).png
這樣我們就可以在自己的項(xiàng)目頁面中看到需要的圖標(biāo)了。
圖14-效果示例.png
注：上圖中的星級(jí)評(píng)價(jià)部分的星星，也是字體圖標(biāo)。但是一開始從網(wǎng)上直接下載下來的顏色是灰色的，這時(shí)需要根據(jù)自己的需要進(jìn)行修改。在iconfont這個(gè)類中可以通過設(shè)置font-size來控制圖標(biāo)的大小，在iconfont icon-wxbsousuotuiguang這個(gè)類中可以通過設(shè)置color來控制圖標(biāo)的顏色。
以上。
