作為一個前端在網站開發過程中，圖示這個東西是必不可少的，有些專案中會有ui設計，他們會給你提供對應的psd，你可以從psd中獲取想要的圖示.png，這個過程真的比較繁瑣而且還不是很方便，比如說某個選單中對應有圖示，但是是選單就必然會有hover事件，這時你如果是用icon.png圖片的方式來做的話至少一個圖示就得有兩個不同顏色的圖示很是麻煩，之前就聽說過阿里巴巴向量圖示庫，一直沒去深究，一直在使用以前的老一套方法依靠ui的png圖,但是在最近的一個專案需要我去模仿別人的網站來做一個自己的網站，發現人家用的都是iconfont，我壓根就沒辦法獲取到對應的png圖片，就不得不去研究iconfont，結果發現賊好用的。下面就是我最近研究的iconfont的結果，在這裡做下記錄。

直接使用阿里巴巴圖示向量庫，簡單使用，自定義自己想要的圖示字型。

1,在iconfont註冊登入後，將你的網站可能會用到的圖示在圖示庫中找到並收藏到自己專案中，然後在專案中下載到本地，如圖：

2，下載下來的zip中的檔案內容如圖所示：

將圖中有用的資訊提取到自己的專案中如下圖所示：

這些都做好後就是在自己的頁面直接引用就OK了，如圖：

這樣頁面就會直接顯示你想要的字型了。

自認為覺得很好用，既簡單又實用，在這裡記錄下。