如何使用IcoMoon字体图标
如何使用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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: virtualBox linux操作系统
- 下一篇: C# using的用法