什么是iconfont？

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

iconfont的好處是什么

眾所周知，以往我們圖片大多是用png。但是png在使用過程中卻有眾多不變之處，譬如每個圖片都是一個請求，當網頁圖片較多時，會比較影響加載的速度，不同分辨率的手機，為了響應式的展示頁面，可能加有2倍圖、3倍圖等，使需要加載的資源變多，影響網頁的性能。

那么iconfont的好處有哪些呢：

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

如何使用iconfont

第一步：

下載所需圖標的svg文件

第二步

打開iconfont 點擊IcoMoon App，再點擊Import Icons 將剛才下載的svg文件導入

第三步

選中之后 點擊Generate Font

第四步

點擊Download下載

---

上面完成了svg轉為iconfont，你也可以在iconfont下載自己自己所需的圖標字體

下面說一下如何引入到自己的項目中

• 將下載的icomoon文件解壓縮，將icomoon里面的font文件夾放進項目的src/assets/ 目錄下，style.css放進src/assets/styles 目錄下
• 將style.css中對應的代碼路徑調整正確
  
• 在main.js中引入css：import './assets/styles/style.css'
• 在代碼中想引入對應圖標只需寫上style.css中對應的class名稱如
  

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

---

注：如不清楚對應的類名，可參照下載包icomoon中的demo.html。在網頁中打開此文件即可。

轉載于:https://www.cnblogs.com/yangAL/p/8509993.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。