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

總結

以上是生活随笔為你收集整理的iconfont添加新图标_老项目中的iconfont字体图标添加新的图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。