圖標字體iconfont的使用

什麼是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。在網頁中打開此文件便可。