如何使用IcoMoon字體圖標(biāo)

一，字體圖標(biāo)工具：

1.登錄字體圖標(biāo)網(wǎng)站：https://icomoon.io/app/#/select

2.Svg在線編輯工具：https://c.runoob.com/more/svgeditor

?

二、如何使用：

1.首先登錄字體圖標(biāo)網(wǎng)站，選擇：New Set From Selection創(chuàng)建自己的Icon集

注：必須先下載有自己的.svg文件才可以Imports Icons

　　編輯圖標(biāo)時(shí)，圖標(biāo)的命名不要與通用名沖突

?

?2.可以點(diǎn)擊Add Icons From Library自己添加Icon：

?

3. 選擇字體圖標(biāo)并創(chuàng)建：

?

4.下載之前先進(jìn)行設(shè)置，可以重命名，但不要與通用名沖突，然后點(diǎn)擊DownLoad進(jìn)行下載：

?下載：

?

設(shè)置：

?

5. 下載到icomoon.zip壓縮文件夾：

?

6.文件夾中內(nèi)容：

?

?7.應(yīng)用：將fonts文件夾全部?jī)?nèi)容與style.css放到項(xiàng)目中：

?1）在項(xiàng)目中建立一個(gè)目錄icon-font，將解壓后的文件放到建立的目錄下（保留selection.json文件，方便二次編輯字體圖標(biāo)）：

?

?

2）在項(xiàng)目的主.scss文件中引入style.css（上圖中的dictationToolApp.scss）：

?

3）在項(xiàng)目應(yīng)用icon的位置寫：

?

?

4）webpack --w 命令打包時(shí)會(huì)在builds文件夾下生成fonts文件夾：

?

?5）在IcoMoon下載的圖標(biāo)就可以用了：

?

轉(zhuǎn)載于:https://www.cnblogs.com/Michelle20180227/p/9116736.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的如何使用IcoMoon字体图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。