像打字一樣插入圖標-iconfont

簡介

- iconfont是什麼?

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

- 有何優勢?

1、輕量性:一個圖標字體比一系列的圖像(特別是在Retina屏中使用雙倍圖像)要小。一旦圖標字體加載了,圖標就會馬上渲染出來,不需要下載一個圖像。可以減少HTTP請求,還可以配合HTML5離線存儲做性能優化。

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

3、兼容性:網頁字體支持所有現代瀏覽器,包括IE低版本。詳細兼容性可以點擊這裏。

- 有何劣勢?

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

2、使用版權上有限制,有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。(問題很小)

3、創作自已的字體圖標很費時間,重構人員後期維護的成本偏高。(問題很小)

基於上面的分析,可以看出iconfont基本沒有劣勢(滑稽)。

那麼這麼好的東西,哪裏才能買到呢?

使用方法

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

  • 步驟1:進入網站。

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

  • 步驟2:選擇自己喜歡的圖標,點擊購物車的按鈕。

clipboard.png

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

clipboard.png

  • 步驟4:點擊添加到項目,如果沒有項目則新建一個項目(“加入項目”按鈕右邊有一個淺灰色按鈕),點擊確定

clipboard.png

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

clipboard.png

  • 步驟6:點開下載到的文件,點擊demo。

clipboard.png

  • 步驟7:查看上面的教程即可~嘿嘿嘿

三種不同引用的區別和注意事項!

  • unicode引用

特點:
-兼容性最好,支持ie6+,及所有現代瀏覽器。
-支持按字體的方式去動態調整圖標大小,顏色等等。
-但是因爲是字體,所以不支持多色。只能使用平臺裏單色的圖標,就算項目裏有多色圖標也會自動去色。

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

clipboard.png

  • font-class引用

與unicode使用方式相比,具有如下特點:
-兼容性良好,支持ie8+,及所有現代瀏覽器。
-相比於unicode語意明確,書寫更直觀。可以很容易分辨這個icon是什麼。
-因爲使用class來定義圖標,所以當要替換圖標時,只需要修改class裏面的unicode引用。
-不過因爲本質上還是使用的字體,所以多色圖標還是不支持的。

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

clipboard.png

  • symbol引用

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

注意:
-使用這種引用只需要將下載到的文件中名爲iconfont.js文件扔進vue項目中即可
-當從阿里圖庫中圖標被添加至項目,如果編輯過項目圖標的顏色或者圖標本身是有顏色的,那麼在通過symbol獲取圖標時會在svg的path中增加fill屬性,導致無法更改顏色,如果需要動態修改顏色,需要這樣操作
clipboard.png

css操作圖標

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

clipboard.png

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

最後

謝謝大家,有問題請在評論區指出

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章