維看幫助中心

如何使用圖標字體組件?

瀏覽數量:422     作者:本站編輯     發佈時間: 2018-02-05      來源:本站

一、什麼是圖標字體組件?


圖標字體組件是一個展示豐富多樣的圖標的模塊,此組件可以實現像文字一樣設置圖標的大小、顏色、位置、鼠標懸停特效、頁面初次加載特效等。

圖標字體組件的應用場景很廣泛,在很多場景起到了畫龍點睛的作用,比如在聯繫我們的字段項前面加上圖標字體,既可以像文字一樣輕便,可以隨意編輯大小、顏色,又可以起到像圖片一樣的美觀效果。

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


二、如何使用圖標字體組件?


1、如何查看圖標字體組件是否已經存在?

如果這個圖標字體組件已經存在了,就不需要再添加,直接根據需要進行相關操作就可以(具體操作見下文所述);

如果你的頁面上需要這個組件,但是還沒有添加,就需要先添加圖標字體組件了;怎麼判斷頁面上有沒有這個組件?單擊查看如何查看某一塊內容是使用什麼組件製作的?


2、如何添加圖標字體組件?

在頁面上添加組件的方法都是一樣的,單擊查看如何添加組件?

添加的組件名稱為“圖標字體”,如下圖所示:

圖標字體組件.png



3、如何設置圖標字體組件?

進入圖標字體組件的設置可以設置組件展示的內容、風格、特效。


3.1 如何進入組件的設置?

進入組件的“設置”分兩種場景:

1)此組件已經添加好的場景:進入所有這類組件設置項方法都是一樣的,可以參考這個攻略如何進入組件的設置項?

2)新添加的組件的場景:在添加此組件時會彈出這個組件的的設置話框。


3.2在組件的設置中可以設置組件展示的內容

選擇圖標字體:單擊下圖“選擇圖標字體”按鈕可在圖標字體庫中選擇圖標字體;

給圖標字體添加鏈接(鏈接地址):支持給圖標字體添加超鏈接,單擊下圖所示的小鍊子按鈕可以加超鏈接,單擊查看鏈接類型介紹

設置圖標字體大小:拖動下圖所示按鈕可以調整圖標字體大小;

設置圖標字體顏色:支持設置圖標字體顏色,如下圖所示;

設置圖標字體鼠標懸停顏色:支持設置鼠標懸停在圖標字體上的顏色;

設置圖標字體位置:支持設置圖標字體居左、居中、或居右;

設置組件內容.png


3.3在組件的設置中可以設置組件展示的風格

目前圖標字體支持以下幾種風格:默認、底色、邊框。

選擇底色風格,支持設置:圖標字體背景圓形直徑、圖標字體背景圓角、圖標字體背景顏色、圖標字體鼠標懸停背景顏色,如下圖所示:

風格.png


選擇邊框風格,支持設置:圖標字體背景圓形直徑、圖標字體背景圓角、圓環顏色、圓環粗細、圖標字體背景顏色、圖標字體鼠標懸停顏色,如下圖所示:

風格1.jpg風格2.jpg


3.4在組件的設置中可以設置組件展示的特效

支持設置鼠標懸停在圖標字體上的特效、以及頁面初次加載特效,如下圖所示:

特效.png


3.5保存組件設置中的內容

組件的內容、風格、特效設置好以後,單擊設置框右下角的“保存”按鈕;

保存.png


4、保存、預覽、發布

設置好以上內容以後要單擊頁面右上角的“保存”按鈕,目的是把此修改保存到網站後台;

然後可以單擊“預覽”按鈕查看不同終端下展示的效果,如果不合適可以到後台再做修改;

如果需要讓訪客也看到,請單擊頁面右上角的“發布”按鈕,發布之後稍等兩分鐘左右即可看網站前台展示效果。

保存預覽發布.png

5.新增領動自有圖標字體庫(2019-4-17優化)

【應用場景】為了豐富網頁設計基本組件,提高圖標文字匹配成度,我們在基礎組件中引入了領動圖標字體庫,該庫由領動自主維護,大家有新的圖標字體的需求請通過工單反饋,我們會逐漸擴展領動圖標字體庫。

【操作方法】在“基礎組件”中選擇“圖標字體”,單擊設置,在彈出的彈窗中點擊“選擇圖標字體”即可切換到領動圖標字體庫,操作如下圖所示:

117YR2PAUO(`[E6@)HP_2E1


【應用效果】領動圖標字體庫所含圖標如下圖所示:

}JIW62$XY%5@TWY$`O36]3


6.新增領動圖標字體庫新增公司資質相關圖標(2019-4-25優化)

【應用場景】為了豐富領動圖標字體庫,我們在庫中新增了公司資質相關圖標,圖標包含“獎牌”“獎杯”“證書”等類別,可應用於對公司及產品所獲獎項、榮譽的介紹。

【操作方法】在組件中選擇“圖標字體”,切換到領動圖標字體庫,選擇需要的公司資質圖標即可。

【應用效果】新增的公司資質圖標如圖所示:

_]@UMR4@(WC2`VRK5GSE007


建站流程

找不到你的問題?
135-6001-3420
seoprixcom@gmail.com
214227632
Facebook
Twitter
Google
LinkedIn
Instagram
維看雲建站系統
專業外貿建站系統,為您打造一個適合谷歌的優化網站!
  • 客服QQ
    214227632
  • 微信手機
    (852) 6741 8807
  • 郵箱
    seoprixcom@gmail.com