1. 程式人生 > >詳解使用icomoon生成字型圖示的方法並應用

詳解使用icomoon生成字型圖示的方法並應用

最近專案大量用到字型圖示,大家也知道,字型圖示任意縮放不會失真,也大大減少請求數量,非常好用。以下將講解本人如何根據美工提供的.svg檔案生成字型圖示並應用。

1、進入網址:主頁面


2、新建一個圖集


3、新增.svg圖片(可以使用現成的,也可以使用自定義的)

使用現成的點選頁面紅色的Add Icons...

使用自定義的直接拖拽進圖集即可新增



4、生成字型檔案

(1)選擇好要生成的圖示(自由選擇)

(2)點選底部的:"Generate Font F"


可以自由命名


5、修改完成後,點選生成Font


下載到壓縮檔案:



運用:將fonts資料夾全部內容和style.css檔案放到相應的專案中。


根據css檔案下面生成的class類的名稱新增到html對應的節點上即可新增字型。

當然新增字型還需要設定font-size,也可以根據實際情況設定color改變其顏色。