?一 前提摘要 ? ? 有一個(gè)活就是按照需求在現(xiàn)有的項(xiàng)目中新增幾個(gè)項(xiàng)目和修改幾個(gè)項(xiàng)目，是很簡單的，但當(dāng)中遇到了一個(gè)小問題，就是tabs中圖標(biāo)選中和被選中的顏色問題，如果是新開發(fā)的，目前掌握的有兩種辦法，比如準(zhǔn)備兩個(gè)類型一樣顏色不一樣的圖片，選中時(shí)圖片隱藏和顯示。另一種就是字體圖標(biāo)，在iconfont找到相應(yīng)的圖標(biāo)，直接應(yīng)用。但是在原來的基礎(chǔ)上進(jìn)行添加圖標(biāo)，原項(xiàng)目上用的是字體圖標(biāo)的形式，也不知道已存在的圖標(biāo)庫，如果重新在iconfont里找太麻煩。前段時(shí)間看到svg，突發(fā)奇想，可不可以將svg轉(zhuǎn)成字體圖標(biāo)，于是上網(wǎng)搜了一下，學(xué)習(xí)并記錄了下來。 ?二 步驟流程 ? ? 第一步：找ui將psd上的圖標(biāo)轉(zhuǎn)化為單個(gè)svg格式的圖標(biāo)，另外自己也可以在psd上弄（這個(gè)后續(xù)學(xué)習(xí)）。 ? ? 第二步：打開icomoon網(wǎng)站 （?https://icomoon.io）?點(diǎn)擊右上角的IconMoon App ? ? ? ? ? ? ? ? ? ? ? 第三步：點(diǎn)擊左上角的的Import Icons，將所有的svg格式的文件導(dǎo)入。 ? ? ? ? ? ? ? ? ? ? ? ?eg：如果svg格式不對的話，導(dǎo)入時(shí)會顯示空白，如下圖 ? ? ? ? ? ? ? ? ? 第四步：選中想要的svg的文件。

? ? ? ? ? ? ?

? ? 第五步：點(diǎn)擊右下角的Generate Font ? ? ? ? ? ? ? ? 第六步：圖標(biāo)對應(yīng)的名稱和編碼可以更改，默認(rèn)的也可以用。 ? ? ? ? ? ? ? 第七步：點(diǎn)擊右下角的Download。 ? ? ? ? ?? ? ? 第八步：解壓，之后將style.css移到font文件夾中去，并且修改路徑。 ? ? ? ?

?　　ps：fonts文件夾中有好幾個(gè)類型的文件，代表的是不同瀏覽器的支持。

? ? ? ? ?IE瀏覽器：EOT ? ? ? ? ?Mozilla瀏覽器：OTF，TTF ? ? ? ? ?Safari瀏覽器：OTF，TTF，SVG ? ? ? ? ?Opera：OTF，TTF，SVG ? ? ? ? ?Chrome瀏覽器：TTF，SVG ? ? 第九步：為了避免和原有的圖標(biāo)造成沖突，我們把這個(gè)font文件夾重命名為iconfont。放到vue項(xiàng)目中的assets中。 ? ? ? ? ? ? ? ?? ? ? 第十步：在app.vue中css導(dǎo)入這個(gè)style.css。 ? ? ? ? ? ?? ? ? 第十一步：通過style.css在vue文件中可以添加這個(gè)類名來調(diào)用這個(gè)字體圖標(biāo)了。 ? ? ? ? ? ? ? ? eg：字體圖標(biāo)就相當(dāng)與字體一樣，可以為其添加顏色。 ? ? 第十二步：成功！ ???? ? 三 總結(jié) 　　這個(gè)是在vue項(xiàng)目上添加的，可以在其他項(xiàng)目上這樣運(yùn)用。字體圖標(biāo)，靈活可變，項(xiàng)目中盡量能用就用這個(gè)，既能像字體一樣使用，又能svg樣放大縮小不失真。 ?

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

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的将svg文件化成字体图标的步骤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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