在近期最新更新的主題版本中,我們增加了Iconfont
圖標(biāo)庫的支持,通過使用Iconfont我們將可以添加自己喜歡的圖標(biāo)到網(wǎng)站,甚至您也可以直接自己設(shè)計(jì)圖標(biāo)。下面具體介紹下圖標(biāo)庫的添加以及使用方法。
1、注冊Iconfont帳號
首先需要到Iconfont官網(wǎng)注冊,地址:https://www.iconfont.cn 目前可通過Github和微博注冊登錄使用。
2、新建圖標(biāo)項(xiàng)目
進(jìn)入網(wǎng)站圖標(biāo)管理>我的項(xiàng)目
,然后點(diǎn)擊右邊新建項(xiàng)目的圖標(biāo):
其中需要注意的是FontClass/Symbol 前綴
選項(xiàng)需要固定填寫icon-
,如圖:
3、添加圖標(biāo)到項(xiàng)目
上傳自己的圖標(biāo)
如果自己有符合要求的svg圖標(biāo)或者自己繪制好的圖標(biāo)(圖標(biāo)繪制可以點(diǎn)擊參考官方說明),可以點(diǎn)擊上傳圖標(biāo)至項(xiàng)目
,如圖:
添加網(wǎng)站線上已有圖標(biāo)
目前Iconfont上已有數(shù)百萬個圖標(biāo),我們可以通過網(wǎng)站的搜索功能找到符合自己需求的圖標(biāo),然后點(diǎn)擊購物車圖標(biāo),如圖:
通過這種方式依次將圖標(biāo)加入到購物車?yán)锩?,然后點(diǎn)開頁面右上角購物車圖標(biāo),點(diǎn)擊添加至項(xiàng)目
,然后選擇之前新建的項(xiàng)目,如圖:
4、生成并復(fù)制Symbol代碼
生成Symbol鏈接
進(jìn)入這個項(xiàng)目,復(fù)制Symbol
代碼,如果沒有看到復(fù)制代碼的入口,可以點(diǎn)擊查看在線鏈接
按鈕,然后下面會出現(xiàn)代碼鏈接(第一次需點(diǎn)擊生成):
將圖標(biāo)添加到主題
進(jìn)入主題設(shè)置>風(fēng)格樣式>圖標(biāo)設(shè)置
,在Iconfont
選項(xiàng)填寫上一步復(fù)制的Symbol
代碼鏈接,然后保存主題設(shè)置并刷新頁面。
5、使用添加的Iconfont圖標(biāo)
通過上面的步驟添加完成圖標(biāo)后,在主題的圖標(biāo)設(shè)置選項(xiàng)就會出現(xiàn)我們自己創(chuàng)建的圖標(biāo)庫了,例如手機(jī)端底部浮層
的圖標(biāo)選項(xiàng):