像打字同樣插入圖標-iconfont

簡介

- iconfont是什麼？

就像名字同樣，iconfont就是圖標字體，像雅黑字體，思源字體同樣，這種字體就是由圖標構成~

- 有何優點？

一、輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化。

二、靈活性：圖標字體能夠用過font-size屬性設置其任何大小，還能夠加各類文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。使用位圖的話，必須得爲每一個不一樣大小和不一樣效果的圖像輸出一個不一樣文件。

三、兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。詳細兼容性能夠點擊這裏。

- 有何劣勢？

一、圖標字體只能被渲染成單色或者CSS3的漸變色。（問題很小,不要慌）

二、使用版權上有限制，有好多字體是收費的。固然也有不少免費開源的精美字體圖標供下載使用。（問題很小）

三、創做自已的字體圖標很費時間，重構人員後期維護的成本偏高。（問題很小）

基於上面的分析，能夠看出iconfont基本沒有劣勢（滑稽）。

那麼這麼好的東西，哪裏才能買到呢？

使用方法

此文使用阿里媽媽的圖標庫。

• 步驟1：進入網站。

點擊桌面上的瀏覽器，輸入 http://www.iconfont.cn/ ，吧唧一聲敲下回車

• 步驟2：選擇本身喜歡的圖標，點擊購物車的按鈕。

• 步驟3：選擇完畢後，點擊右上角的購物車按鈕。

• 步驟4：點擊添加到項目，若是沒有項目則新建一個項目（「加入項目」按鈕右邊有一個淺灰色按鈕），點擊肯定

• 步驟5：點擊下載到本地。

• 步驟6：點開下載到的文件，點擊demo。

• 步驟7：查看上面的教程便可~嘿嘿嘿

三種不一樣引用的區別和注意事項！

• unicode引用

特色：
-兼容性最好，支持ie6+，及全部現代瀏覽器。
-支持按字體的方式去動態調整圖標大小，顏色等等。
-可是由於是字體，因此不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色。

注意：
這裏src中須要填寫對應路徑，你下載到的文件（上一步驟叫你下載的）中名爲iconfont的eot,woff,ttf,svg類型的文件都要扔進vue項目中

• font-class引用

與unicode使用方式相比，具備以下特色：
-兼容性良好，支持ie8+，及全部現代瀏覽器。
-相比於unicode語意明確，書寫更直觀。能夠很容易分辨這個icon是什麼。
-由於使用class來定義圖標，因此當要替換圖標時，只須要修改class裏面的unicode引用。
-不過由於本質上仍是使用的字體，因此多色圖標仍是不支持的。

注意:
使用這種引用只須要將下載到的文件中名爲iconfont類型爲css,svg,ttf,eot的文件扔進vue項目中便可

• symbol引用

這是一種全新的使用方式，應該說這纔是將來的主流，也是平臺目前推薦的用法。這種用法實際上是作了一個svg的集合，與另外兩種相比具備以下特色：
-支持多色圖標了，再也不受單色限制。
-經過一些技巧，支持像字體那樣，經過font-size,color來調整樣式。
-兼容性較差，支持 ie9+,及現代瀏覽器。
-瀏覽器渲染svg的性能通常，還不如png。

注意：
-使用這種引用只須要將下載到的文件中名爲iconfont.js文件扔進vue項目中便可
-當從阿里圖庫中圖標被添加至項目，若是編輯過項目圖標的顏色或者圖標自己是有顏色的，那麼在經過symbol獲取圖標時會在svg的path中增長fill屬性，致使沒法更改顏色，若是須要動態修改顏色，須要這樣操做

css操做圖標

通過咱們上面一些步驟的操做呢 我相信 你已經能看到這條鹹魚了。

.icon-xia{
  font-size: 40px; // fontsize多大 寬高就多大
  vertical-align: middle; //這個行內垂直居中簡直不要太舒服
  color: red;//改變顏色
  opacity:.6;//改變透明度
  ...//沒錯，操做起來就像字體同樣，縱享絲滑
}

最後

謝謝你們，有問題請在評論區指出