- 這里使用的是 icoMoon 的工具進(jìn)行制作的
- 首先點(diǎn)擊頁(yè)面右上角的 【Import Icons】 按鈕辙谜，之后找到項(xiàng)目中的 svg 文件路徑卿城，選中 svg 文件（這里也是可以多選的噢~）越除，之后再點(diǎn)擊【打開(kāi)】即可
image.png
- 之后會(huì)在當(dāng)前頁(yè)面生成一個(gè)我們上傳的 svg 文件的列表浦译，需要點(diǎn)擊該 icon 其背景顏色變?yōu)榘咨幢硎境晒ι涎祝笤冱c(diǎn)擊右下角的 【Generate Font 】按鈕
image.png
- 之后就成功生成想要的字體文件了拴竹，將鼠標(biāo)放到每一個(gè)文件上面會(huì)出現(xiàn) 【Get Code 】的按鈕
image.png
- 點(diǎn)擊【Get Code】按鈕就可以看到具體的使用方法
image.png
由于我這個(gè) icon 較為復(fù)雜扫俺，所以不太使用這種轉(zhuǎn)字體的方法路鹰，簡(jiǎn)潔一點(diǎn)的 svg 文件較為合適惨篱，上面只是演示了其用法
- 之后可以點(diǎn)擊右上角的 【Preferences】按鈕對(duì)生成的字體文件目錄進(jìn)行自定義的設(shè)置
image.png
目錄名稱(chēng)
類(lèi)名前綴
下面的瀏覽器支持情況
以及下面的其他的選項(xiàng)
除了目錄名稱(chēng)其他的使用默認(rèn)的即可
- 最后將上面修改目錄名稱(chēng)的彈窗關(guān)閉盏筐，再點(diǎn)擊右下角的【Download】按鈕，便會(huì)自動(dòng)的將所有的 svg 文件生成一個(gè)
xiaochuan-icon目錄的壓縮文件砸讳，并全部下載下來(lái)
image.png
- 之后將壓縮包解壓琢融，下圖是解壓后的目錄下的所有文件
image.png
fonts 就是所有的圖標(biāo)字體文件
- 使用方法：將 style.css 文件中的
css 樣式以及 fonts 目錄直接拷貝到項(xiàng)目中去，就可以直接使用圖標(biāo)字體了
