什么是iconfont？

iconfont就是字面上的意思，叫做“字體圖標(biāo)”，將一套圖標(biāo)集以字體文件的形式封裝，并通過(guò) CSS 的 @font-face 作為 Web Font 調(diào)用。

iconfont的好處是什么

眾所周知，以往我們圖片大多是用png。但是png在使用過(guò)程中卻有眾多不變之處，譬如每個(gè)圖片都是一個(gè)請(qǐng)求，當(dāng)網(wǎng)頁(yè)圖片較多時(shí)，會(huì)比較影響加載的速度，不同分辨率的手機(jī)，為了響應(yīng)式的展示頁(yè)面，可能加有2倍圖、3倍圖等，使需要加載的資源變多，影響網(wǎng)頁(yè)的性能。

那么iconfont的好處有哪些呢：

• 輕量性：一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標(biāo)字體加載了，圖標(biāo)就會(huì)馬上渲染出來(lái)，不需要下載一個(gè)圖像。可以減少HTTP請(qǐng)求，還可以配合HTML5離線存儲(chǔ)做性能優(yōu)化。每個(gè)小圖標(biāo)只有幾kb，大大節(jié)省了加載時(shí)間。
• 靈活性：圖標(biāo)字體可以用過(guò)font-size屬性設(shè)置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果。可以在任何背景下顯示。
• 兼容性：網(wǎng)頁(yè)字體支持所有現(xiàn)代瀏覽器，包括IE低版本。詳細(xì)兼容性可以點(diǎn)擊這里。
• 可縮放，可以很方便的改變圖標(biāo)的大小。不用擔(dān)心不同分辨率的設(shè)備上展示差異問(wèn)題。
• 矢量，iconfont 是矢量的并且具有獨(dú)立的分辨率，不管在高分辨率還是低分辨率，不管是在網(wǎng)頁(yè)還是手機(jī)端，都具有很好的展示效果，不會(huì)出現(xiàn)鋸齒或者馬賽克模糊。

如何使用iconfont

第一步：

下載所需圖標(biāo)的svg文件

第二步

打開(kāi)iconfont 點(diǎn)擊IcoMoon App，再點(diǎn)擊Import Icons 將剛才下載的svg文件導(dǎo)入

第三步

選中之后 點(diǎn)擊Generate Font

第四步

點(diǎn)擊Download下載

---

上面完成了svg轉(zhuǎn)為iconfont，你也可以在iconfont下載自己自己所需的圖標(biāo)字體

下面說(shuō)一下如何引入到自己的項(xiàng)目中

• 將下載的icomoon文件解壓縮，將icomoon里面的font文件夾放進(jìn)項(xiàng)目的src/assets/ 目錄下，style.css放進(jìn)src/assets/styles 目錄下
• 將style.css中對(duì)應(yīng)的代碼路徑調(diào)整正確
  
• 在main.js中引入css：import './assets/styles/style.css'
• 在代碼中想引入對(duì)應(yīng)圖標(biāo)只需寫上style.css中對(duì)應(yīng)的class名稱如
  

<span class="icon-add-people"></span>

---

注：如不清楚對(duì)應(yīng)的類名，可參照下載包icomoon中的demo.html。在網(wǎng)頁(yè)中打開(kāi)此文件即可。

轉(zhuǎn)載于:https://www.cnblogs.com/yangAL/p/8509993.html

總結(jié)

以上是生活随笔為你收集整理的图标字体iconfont的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。