使用IcoMoon生成圖示字型

What is IcoMoon ?

昨兒個託我們美女UI的福，接觸了這個網站，之前確實沒摸瑟過，原諒我孤陋寡聞，昨天小試了一下感覺不錯，趕緊分享之。那麼IcoMoon究竟是幹哈的呢？接下來簡單介紹下。

IcoMoon.png

就我個人而言，往往要想找點什麼ICON素材啊，往往都是醬嬸滴，先去(線上圖示字型庫，但資源有限)裡面巴拉巴拉，或者其他資源看看有沒有合適的。如果沒有就去求助我們大UI，笑笑給我來整個“加號”啊，笑笑有“減號”嗎？來一個來一個，笑笑再給我來個“垃圾箱”唄...嗯，沒錯，我一般都是這麼折磨我們UI的。個人還是比較喜歡FontAwesome，其提供的資源很豐富，風格很統一，而且直接在頁面內引用需要的樣式即可，不需要自己再去調整素材的樣式。而我們今天要白話的IcoMoon，大致作用就是生成類似FontAwesome的圖示字型。

IcoMoon是一個線上的圖示字型生成器。其允許我們透過個性化設定生成ICON字型，我們可以上傳本地ICON資源也可以使用IcoMoon給我們提供的豐富素材，最終生成的ICON字型有多種格式供我們選擇（EOT,SVG,WOFF,TTF）。總而言之，有了這個免費資源，我們就可以個性化的生成ICON字型，然後應用到我們的WEB頁面中了。

生成自定義圖示字型

當我們想要自己的圖示圖示字型時，操作步驟就如同把大象關進冰箱裡，歸納起來可分為三步：

• 準備自定義ICON素材 ;

• 生成字型檔案;

• 在CSS中引用字型檔案;

A. 準備自定義ICON素材

此處需要注意的是，icomoon要求素材格式必須為SVG格式，所以其他格式的素材需提前轉換，在此不做贅述。

B. 生成圖示字型

到 網站生成圖示，具體過程如下：

1 單擊 import icons 按鈕 匯入我們準備好的svg 圖示，或者Add Icons From Library引用這個網站上的一些現成圖示。

匯入素材.png

2 素材新增完成後，點選右下角Font F按鈕進入屬性設定頁面。

字型設定.png

3 點選Preferences按鈕，進行字型屬性設定。

設定按鈕.png

這裡我們可以設定字型的名稱，字型樣式名稱，以及對瀏覽器的相容性

字型屬性.png

4 下載字型檔案及demo，點選頁面右下方的Download按鈕打包下載所有資源。

下載字型及demo.png

5 解壓下載後的壓縮包，可以得到以下的資料夾 其中包括demo，style.css 及fonts檔案中的字型檔案就是我們要的。使用時，一起複製到我們的專案中即可。

壓縮包.png

C 在專案中引用

1 將所要用的css 及字型檔案放到一個資料夾中。

引入圖示字型.png

2 在index.html 中引入我們的css。

引入樣式.png

3 在需要的頁面引用，直接加到相應標籤的class屬性中，作為樣式引用即可。

標籤內引用.png

至此，Class is over！從此以後，UI再也不用擔心你煩她了！

作者：桂圓_noble
連結：