iconfont添加新图标_老项目中的iconfont字体图标添加新的图标

最近，一直在折腾自己的新的博客，采用的是halo博客系统，感觉还是很不错的，就是主题有点少，自用的主题是siren,感觉自己做的不错就分享到了halo论坛，然后被提示标题前面的图标不显示。

也不知道说的是不是标题前的图标。

研究了一下发现，siren主题(有时间该换个名字吧)，原来是hexo的主题(另一个博客系统)，后来一直过来的，原来采用的是FontAwesome字体，移植过来换成了iconfont字体，移植过来标题前的图标都给取消了，但是其他部分的都还在。没办法了只能自己加了！

吐槽一下！这个“死人主题”，许多的不同模块格式都是一个CSS文件控制的，如果要修改，自己可要看清楚！

废话说完了，要来真的了!

老项目的iconfront字体加入新的图标！

1.打开iconfront官网

2.选择你自己要用的图标

添加好以后，点击下载图标代码。

3.解压文件，查看下载的图标

打开demo_index.html文件

可以看到自己下载的图标文件

4.修改字体文件名称

一共有四个文件，可以根据自己需求去修改，能和老文件区分开就可以。

修改的原因是，每次自己下载的代码就只包含下载的那些图标。老的如果被替掉那么原来系统的图标都会挂了！

这个也没办法，不像FontAwesome的字体是官方维护，因此每次只需要将所有图标字体下载就可以。iconfront是用户分享的没法做到，整体打包！

5.将修改好的文件上传服务器

6.将下载的iconfont.css文件加入到项目css文件中。

再添加的过程中可要小心不要将，.iconfont部分添加进去，这个可不一定和你原来的文件配置相同。

7.选择加到标题前的图标，记住图标编号(老系统采用的Unicode引用)

8.将图标代码添加在文字前面



9.保存、刷新、大功告成！