一、什么是圖標(biāo)字體組件？

圖標(biāo)字體組件是一個(gè)展示豐富多樣的圖標(biāo)的模塊，此組件可以實(shí)現(xiàn)像文字一樣設(shè)置圖標(biāo)的大小、顏色、位置、鼠標(biāo)懸停特效、頁面初次加載特效等。

圖標(biāo)字體組件的應(yīng)用場(chǎng)景很廣泛，在很多場(chǎng)景起到了畫龍點(diǎn)睛的作用，比如在聯(lián)系我們的字段項(xiàng)前面加上圖標(biāo)字體，既可以像文字一樣輕便，可以隨意編輯大小、顏色，又可以起到像圖片一樣的美觀效果。

圖標(biāo)字體組件使用起來很靈活，加載速度也很快，但請(qǐng)注意圖標(biāo)字體在低版本的 IE（IE5、IE6、IE7）兼容性不好，會(huì)不顯示圖標(biāo)字體，請(qǐng)大家知曉。

 

二、如何使用圖標(biāo)字體組件？

1、如何查看圖標(biāo)字體組件是否已經(jīng)存在？

如果這個(gè)圖標(biāo)字體組件已經(jīng)存在了，就不需要再添加，直接根據(jù)需要進(jìn)行相關(guān)操作就可以（具體操作見下文所述）；

如果你的頁面上需要這個(gè)組件，但是還沒有添加，就需要先添加圖標(biāo)字體組件了；怎么判斷頁面上有沒有這個(gè)組件？

2、如何添加圖標(biāo)字體組件？

在頁面上添加組件的方法都是一樣的

添加的組件名稱為“圖標(biāo)字體”，如下圖所示：

3、如何設(shè)置圖標(biāo)字體組件？

進(jìn)入圖標(biāo)字體組件的設(shè)置可以設(shè)置組件展示的內(nèi)容、風(fēng)格、特效。

3.1 如何進(jìn)入組件的設(shè)置？

進(jìn)入組件的“設(shè)置”分兩種場(chǎng)景：

1）此組件已經(jīng)添加好的場(chǎng)景：進(jìn)入所有這類組件設(shè)置項(xiàng)方法都是一樣的，可以參考這個(gè)攻略：如何進(jìn)入組件的設(shè)置項(xiàng)？

2）新添加的組件的場(chǎng)景：在添加此組件時(shí)會(huì)彈出這個(gè)組件的的設(shè)置話框。

3.2 在組件的設(shè)置中可以設(shè)置組件展示的內(nèi)容

選擇圖標(biāo)字體：?jiǎn)螕粝聢D“選擇圖標(biāo)字體”按鈕可在圖標(biāo)字體庫中選擇圖標(biāo)字體；

給圖標(biāo)字體添加鏈接（鏈接地址）：支持給圖標(biāo)字體添加超鏈接，單擊下圖所示的小鏈子按鈕可以加超鏈接，

設(shè)置圖標(biāo)字體大小：拖動(dòng)下圖所示按鈕可以調(diào)整圖標(biāo)字體大?。?/span>

設(shè)置圖標(biāo)字體顏色：支持設(shè)置圖標(biāo)字體顏色，如下圖所示；

設(shè)置圖標(biāo)字體鼠標(biāo)懸停顏色：支持設(shè)置鼠標(biāo)懸停在圖標(biāo)字體上的顏色；

設(shè)置圖標(biāo)字體位置：支持設(shè)置圖標(biāo)字體居左、居中、或居右；

3.3 在組件的設(shè)置中可以設(shè)置組件展示的風(fēng)格

目前圖標(biāo)字體支持以下幾種風(fēng)格：默認(rèn)、底色、邊框。

選擇底色風(fēng)格，支持設(shè)置：圖標(biāo)字體背景圓形直徑、圖標(biāo)字體背景圓角、圖標(biāo)字體背景顏色、圖標(biāo)字體鼠標(biāo)懸停背景顏色，如下圖所示：

選擇邊框風(fēng)格，支持設(shè)置：圖標(biāo)字體背景圓形直徑、圖標(biāo)字體背景圓角、圓環(huán)顏色、圓環(huán)粗細(xì)、圖標(biāo)字體背景顏色、圖標(biāo)字體鼠標(biāo)懸停顏色，如下圖所示：

3.4 在組件的設(shè)置中可以設(shè)置組件展示的特效

支持設(shè)置鼠標(biāo)懸停在圖標(biāo)字體上的特效、以及頁面初次加載特效，如下圖所示：

3.5 保存組件設(shè)置中的內(nèi)容

組件的內(nèi)容、風(fēng)格、特效設(shè)置好以后，單擊設(shè)置框右下角的“保存”按鈕；

4、保存、預(yù)覽、發(fā)布

設(shè)置好以上內(nèi)容以后要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網(wǎng)站后臺(tái)；

然后可以單擊“預(yù)覽”按鈕查看不同終端下展示的效果，如果不合適可以到后臺(tái)再做修改；

如果需要讓訪客也看到，請(qǐng)單擊頁面右上角的“發(fā)布”按鈕，發(fā)布之后稍等兩分鐘左右即可看網(wǎng)站前臺(tái)展示效果。