二手项目iconfont字体图标svg找回的几种情况

前提：接手旧项目，项目中有字体图标。但是没有阿里巴巴图标库线上地址了，如果要新增图标怎么办？

三种方式对应以下的三种情况：

1. 重新在阿里巴巴图标库管理所有图标
   （1）有svg文件直接转出来，上传到阿里巴巴自己管理
   （2）仅有css文件，src中的url是base64.那就先将base64转为svg，再操作第一步

2. 直接快速添加下载好的svg

工具地址：
(1) 包含所有svg的文件在线查看所有svg图标
(2) 各种互转，这个好用：ttf转为base64,svg
(3) 备用： ttf转为svg

情况一、有后缀为svg的文件，直接去找个线上地址转为svg，重新上传到自己新建的阿里巴巴图标库

有svg后缀的情况

解决：在这里上传下载即可：在线转换地址

操作步骤 这里面就是所有的svg

有了这些图标想怎么玩就怎么玩，后面就不说了

情况二、看下图：只有一份打包后的css，src中的url引入的tff文件是base64形式

企业微信截图_69b97b2e-34c0-4236-ac90-683841c10ac6.png

1.在浏览器中找到文件，下载后更改后缀名为ttf

下载css

2. 得到ttf了 ，ttf转为svg先，在线转换地址点我
   

   企业微信截图_1766e956-03d9-45d2-8176-81d39315bd6d.png

3. 有了含有所有svg图标的后缀为.svg文件，就可以去情况一的地址中查看所有svg图标了

情况三、当然你说你就只想添加一个图标到项目，后面就甩手不管了。可以这样添加

1. 在阿里巴巴找个图标下载下来，下载一个眼睛

   
   眼睛图标

2. 这里只需要关注ttf文件和css文件即可

   
   改名

3. 复制这里的css文件中的样式到原项目的css中即可，下面红色圈中的为复制过来的

复制到原项目

使用

<i class="iconfont icon-yanjing_xianshi"></i>

看效果

企业微信截图_b74d0663-78dd-47ba-93b9-9e1065504523.png

进一步：注意上面的截图红色圈圈可以发现：原项目是没有ttf或者woff文件的，是将ttf转为了base64。那我们新增的eyes是不是也可以这样呢？可以的

1. 将ttf转为base64. 在线转换地址

企业微信截图_58088c91-59f0-4baa-a050-38a9384744a6.png

2. copy它，删掉ttf文件

copy大法好

结束语：现在项目都是直接将svg放入项目，使用svg标签全局组件使用。以上问题也只有旧项目交接不好才会出现