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