Iconfont使用手冊

Iconfont是阿里巴巴矢量圖標庫，本文將簡單介紹如何快速上手使用Iconfont，自從用上Iconfont後，圖片不再糊了

原由

以前，項目中的logo等圖片資源都是UI小姐姐設計好後切給我，而後我將其引入項目中，以下形式：

<img scr="./logo.png" />

但這種方式有一個弊端，就是圖片放大後，或者在高分辨率的顯示器下面會變得模糊，致使不夠清晰，對於一個有高要求高標準的場景而言，顯然是不夠的，因而團隊討論，決定用上Iconfont，這是一種矢量圖片庫，由UI小姐姐將圖片傳到阿里Iconfont網站，而後前端下載並引入便可，很是方便。

下載並使用

登陸Iconfont，在個人項目中，共有三種形式，這裏我通常選擇Font class, 而後點擊下載至本地，會獲得這樣一個文件夾。

將下圖中五項copy出來，新建一個myfont文件夾（自定義命名，隨便你）

而後，在你的html頁面中引入進來

<link rel="stylesheet" href="./myfont/iconfont.css" />

最後，在須要的地方使用便可

<i class="iconfont icon-team"></i>

延伸

Iconfont網站上有不少開源的庫，別人已經設計好了，若是公司沒有UI設計師，你也能夠選擇一套本身進行組裝，很是自由，固然，矢量庫還有，Font Awesome 等，也很是不錯，用法嘛，都是大同小異。