在近期最新更新的主題版本中,我們增加了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):

新建圖標(biāo)項(xiàng)目

其中需要注意的是FontClass/Symbol 前綴選項(xiàng)需要固定填寫icon-,如圖:

新建圖標(biāo)項(xiàng)目

3、添加圖標(biāo)到項(xiàng)目

上傳自己的圖標(biāo)

如果自己有符合要求的svg圖標(biāo)或者自己繪制好的圖標(biāo)(圖標(biāo)繪制可以點(diǎn)擊參考官方說明),可以點(diǎn)擊上傳圖標(biāo)至項(xiàng)目,如圖:

上傳自己的圖標(biāo)

添加網(wǎng)站線上已有圖標(biāo)

溫馨提示:線上字體圖標(biāo)可能會涉及到版權(quán)問題,使用前建議識別圖標(biāo)版權(quán)風(fēng)險,或者聯(lián)系圖標(biāo)作者獲取授權(quán)許可;強(qiáng)烈建議使用免費(fèi)開源圖標(biāo)

目前Iconfont上已有數(shù)百萬個圖標(biāo),我們可以通過網(wǎng)站的搜索功能找到符合自己需求的圖標(biāo),然后點(diǎn)擊購物車圖標(biāo),如圖:

添加網(wǎng)站線上已有圖標(biāo)

通過這種方式依次將圖標(biāo)加入到購物車?yán)锩?,然后點(diǎn)開頁面右上角購物車圖標(biāo),點(diǎn)擊添加至項(xiàng)目,然后選擇之前新建的項(xiàng)目,如圖:

添加網(wǎng)站線上已有圖標(biāo)

4、生成并復(fù)制Symbol代碼

生成Symbol鏈接

進(jìn)入這個項(xiàng)目,復(fù)制Symbol代碼,如果沒有看到復(fù)制代碼的入口,可以點(diǎn)擊查看在線鏈接按鈕,然后下面會出現(xiàn)代碼鏈接(第一次需點(diǎn)擊生成):

生成并復(fù)制Symbol代碼

將圖標(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):

使用添加的Iconfont圖標(biāo)