奇叔
iconfont相信大家都不陌生，这两天在修改东西的时候遇到这个iconfont的问题，这里简单记录下！本次的情况是需要在原本iconfont的基础上，增加一些图标并应用到前端。原本是打算做一个新的iconfont，保持原来调用的iconfont不变。但尝试下来效果不佳，因为要先加载原本的文件，再加载新的文件所以会出现图标显示不同步的情况，于是便重新制作iconfont并替换原来的。
有童鞋会问为什么不直接引用fontawesome或阿里的图标库？
1. 不论引用外部哪一个库这对seo并不太友好，当然如果忽略这一点也无所谓。
2. 由于外部引用，如果出现网络不畅的情况，可能导致图标显示有问题，本地调用会更快！
3. 图标风格希望自定义，那么可能引用现有库不是一个太好的选择！
如果对上述情况都无需求或不愿折腾，那引用其他库是最简单的办法！
在开始制作新图标之前，利用 iconfont-preview 可以在线解析本地或线上iconfont，查看其所使用的图标内容。解析出来的内容如下图：
在知道原本所使用图标后，在此基础上扩展，首先我们需要利用 illustrator 等矢量工具设计制作新的图标，也可以在很多在线免费图标网站下载svg文件，或在这些网站对图标风格进行参考。
矢量图标下载站：
如果下载的svg文件尺寸大小不太一致，或风格需要调整，可以在 illustrator 进行再次编辑。本次将文件大小统一调整成100×100像素的画布上进行编辑，编辑好后保存所有svg文件。
接下来我们去到 icomoon 在这里在线生成所需的 iconfont 字体。将编辑好的svg文件上传至网站，生成字体后下载！
下载压缩包解压后，将可以看到相应的css应用示例等都在其中。在fonts文件夹中我们可以看到，分别包含.eot、.svg、.ttf、.woff 可能还需要 .woff2 文件，这个可以利用其中任意文件进行在线转换。比如我们在Google搜索ttf to woff2将会有很多网站可以进行此操作。
再回到 iconfont-preview 这个在线解析工具上传查看新做好的字体，可以查看并复制相应图标引用代码！
将所有字体文件名修改成网站上原本iconfont文件名一致，并对应上传替换。在css代码中修改相对应调用编号或代码，整个替换完成。
如果觉得文章对你有帮助，欢迎点赞留言打赏请我喝杯咖啡！
