前提：接手舊項目，項目中有字體圖標(biāo)庆揩。但是沒有阿里巴巴圖標(biāo)庫線上地址了贸人，如果要新增圖標(biāo)怎么辦？
三種方式對應(yīng)以下的三種情況：
重新在阿里巴巴圖標(biāo)庫管理所有圖標(biāo)
（1）有svg文件直接轉(zhuǎn)出來鲸阔，上傳到阿里巴巴自己管理
（2）僅有css文件偷霉，src中的url是base64.那就先將base64轉(zhuǎn)為svg迄委，再操作第一步直接快速添加下載好的svg
工具地址：
(1) 包含所有svg的文件在線查看所有svg圖標(biāo)
(2) 各種互轉(zhuǎn)，這個好用：ttf轉(zhuǎn)為base64,svg
(3) 備用： ttf轉(zhuǎn)為svg
情況一类少、有后綴為svg的文件叙身，直接去找個線上地址轉(zhuǎn)為svg，重新上傳到自己新建的阿里巴巴圖標(biāo)庫
有svg后綴的情況
解決：在這里上傳下載即可：在線轉(zhuǎn)換地址
操作步驟
這里面就是所有的svg
有了這些圖標(biāo)想怎么玩就怎么玩硫狞，后面就不說了
情況二信轿、看下圖：只有一份打包后的css，src中的url引入的tff文件是base64形式
企業(yè)微信截圖_69b97b2e-34c0-4236-ac90-683841c10ac6.png
1.在瀏覽器中找到文件残吩，下載后更改后綴名為ttf
下載css
-
得到ttf了 财忽，ttf轉(zhuǎn)為svg先，在線轉(zhuǎn)換地址點我
企業(yè)微信截圖_1766e956-03d9-45d2-8176-81d39315bd6d.png 有了含有所有svg圖標(biāo)的后綴為.svg文件泣侮，就可以去情況一的地址中查看所有svg圖標(biāo)了
情況三即彪、當(dāng)然你說你就只想添加一個圖標(biāo)到項目，后面就甩手不管了活尊×バ＃可以這樣添加
-
在阿里巴巴找個圖標(biāo)下載下來，下載一個眼睛
眼睛圖標(biāo) -
這里只需要關(guān)注ttf文件和css文件即可
改名 復(fù)制這里的css文件中的樣式到原項目的css中即可蛹锰，下面紅色圈中的為復(fù)制過來的
復(fù)制到原項目
使用
<i class="iconfont icon-yanjing_xianshi"></i>
看效果
企業(yè)微信截圖_b74d0663-78dd-47ba-93b9-9e1065504523.png
進一步：注意上面的截圖紅色圈圈可以發(fā)現(xiàn)：原項目是沒有ttf或者woff文件的深胳，是將ttf轉(zhuǎn)為了base64。那我們新增的eyes是不是也可以這樣呢铜犬？可以的
- 將ttf轉(zhuǎn)為base64. 在線轉(zhuǎn)換地址
企業(yè)微信截圖_58088c91-59f0-4baa-a050-38a9384744a6.png
- copy它舞终，刪掉ttf文件
copy大法好
結(jié)束語：現(xiàn)在項目都是直接將svg放入項目，使用svg標(biāo)簽全局組件使用翎苫。以上問題也只有舊項目交接不好才會出現(xiàn)
