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

? ? ? ? ? ? ?

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

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

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

轉載于:https://www.cnblogs.com/sqh17/p/9986444.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。