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 項目中須要用到的樣式文件。