使用IcoMoon生成圖標字體

就我我的而言，每每要想找點什麼ICON素材啊，每每都是醬嬸滴，先去FontAwesome(在線圖標字體庫，但資源有限)裏面巴拉巴拉，或者其餘資源看看有沒有合適的。若是沒有就去求助咱們大UI，笑笑給我來整個「加號」啊，笑笑有「減號」嗎？來一個來一個，笑笑再給我來個「垃圾箱」唄...嗯，沒錯，我通常都是這麼折磨咱們UI的。我的仍是比較喜歡FontAwesome，其提供的資源很豐富，風格很統一，並且直接在頁面內引用須要的樣式便可，不須要本身再去調整素材的樣式。而咱們今天要白話的IcoMoon，大體做用就是生成相似FontAwesome的圖標字體。

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

生成自定義圖標字體

當咱們想要本身的圖標圖標字體時，操做步驟就如同把大象關進冰箱裏，概括起來可分爲三步：

• 準備自定義ICON素材 ;
• 生成字體文件;
• 在CSS中引用字體文件;

A. 準備自定義ICON素材

此處須要注意的是，icomoon要求素材格式必須爲SVG格式，因此其餘格式的素材需提早轉換，在此不作贅述。

B. 生成圖標字體

到 https://icomoon.io/app/#/select 網站生成圖標，具體過程以下：

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

做者：桂圓_noble連接：https://www.jianshu.com/p/86fca912fd1d來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。