第一步 下載樣式
http://www.iconfont.cn/
選擇圖表,點擊加入購物車
第二步 解壓下載文件到項目 css中
這裏其實可以不用將下載中的所有文件全部放入你的實際項目,在首次添加到實際項目中有iconfont.css和iconfont.js就可以了,而後面添加新的圖標只要更新css文件就好(參考網址中也有講到)。
第三步 修改文件名稱 與 iconfont.css 文件名路徑
這裏的@font-face內容中的文件名必須要改,否則會跟原先的衝突,導致新的圖標無法引用,@font-face內容可在下載文件中的iconfont.css文件中查看和修改,下面的字體編碼的定義也在iconfont.css中
第四步 將@font-face 拷貝到項目中的原 iconfont.css 中
第五步
.icon-icongerenjishiben:before { content: “\e6a3”; }
.icon-ruiyanshicai05:before { content: “\e61a”; }
.icon-cehuixiaoheditumoshi:before { content: “\e631”; }
將相應圖標的字體編碼寫入原 iconfont.css 中 調用即可
如何在頁面上調用可查看下面的網站
參考網站:
https://www.cnblogs.com/fashandian/p/6880892.html(如何使用iconfont)
https://blog.csdn.net/DreamITEffort/article/details/84581317