icomoon字體圖標導入與使用

icomoon字體圖標導入與使用

進入icomoon官網

---

點擊鏈接進入icomoon官網
進入官網，默認會生成一套圖標文件，如果不需要可以將所有的文件進行刪除。具體操作如下圖所示。

會員用戶可以通過賬號存儲圖標的信息，非會員用戶只能通過瀏覽器的在本地存儲相應的圖標信息，故普通用戶勁量在同一個瀏覽器上面去編輯圖標庫，有需要的情況下將所有的svg圖標進行導出備份。

---

導入圖標

1. 點擊import Icons按鈕，選擇自己的圖標進行導入。

2. 圖標導入後，選擇需要生成字體庫的圖標，默認所有的圖標是不選中的。

3. 通過操作按鈕修改圖標的描述排序等相關信息。

4. 選中修改按鈕，點擊任意圖標，彈出信息修改框。

5. 勾選完所需要的圖標後點擊Generate Font生成字體文件。

6. 在此頁還是可以對圖標的最終信息進行編輯。

1. 所有圖標的名稱不能重複，圖標名稱用於最終的css類名稱。
2. 圖標對應的16進制編碼也不能重複，編碼與圖標是一一對應關係。
3. 最後生成的字體文件都會對圖標默認加上icon-的前綴。

---

字體庫項目編輯

1. 點擊項目管理按鈕，進入項目管理界面

2. 如圖示可對項目進行相應的操作

字體庫文件使用

下載後解壓到本地，會有如圖多個文件，項目中需要使用的文件就fonts文件夾下的字體文件,style.css樣式文件即可。

1. demo-files,demo.html demo示例文件。
2. fonts 字體文件。
3. Read Me.txt 說明文件。
4. selection.json iconmoon項目文件，可用於導入。
5. style.css 項目中需要用到的樣式文件。