最近,一直在折腾自己的新的博客,采用的是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.保存、刷新、大功告成!