查詢方法
請(qǐng)點(diǎn)擊進(jìn)入Fontawasome5.x 圖標(biāo)查詢頁(yè)面
進(jìn)入之后可見所有圖標(biāo),右側(cè)下方可選各個(gè)分類的圖標(biāo),可根據(jù)自身要求連續(xù)選擇所需的分類。
注意,切換版本之前,請(qǐng)確保安裝了 font awesome1.02本地化插件 否則圖標(biāo)則會(huì)顯示不全
Fontawasome5.x版本介紹:多達(dá)1500+的免費(fèi)精致圖標(biāo)
我們?cè)谥暗拈_發(fā)中,使用了Fontawasome這一字體圖標(biāo),字體圖標(biāo)的好處是:
不管在什么設(shè)備上,總能最精細(xì)的顯示出來,而不會(huì)失真 。
只需要輸入一個(gè)圖標(biāo)的名稱,即可在網(wǎng)頁(yè)上顯示想要的圖標(biāo)
顏色可以隨意更改,相比圖片而言,字體圖標(biāo)有更多的靈活的樣式
可以輕松的制作優(yōu)美的動(dòng)態(tài)圖標(biāo),比如旋轉(zhuǎn),縮放,都可以輕松實(shí)現(xiàn)。
之前我們?cè)陂_發(fā)過程中使用的是Fontawasome4.7版本,最近Fontawasome5已經(jīng)趨于成熟,并且有了完全壓倒性優(yōu)勢(shì)。
Fontawasome 5版本增加了除網(wǎng)頁(yè)常用圖標(biāo)外的更多分類和可應(yīng)用于更多行業(yè)的圖標(biāo):
如上圖所示,我們可以根據(jù)需要,去切換各個(gè)分類找到適合于我們的圖標(biāo)了。
比如導(dǎo)航上,根據(jù)我們的行業(yè)特點(diǎn),給每個(gè)導(dǎo)航項(xiàng)目加入圖標(biāo):
在圖標(biāo)應(yīng)用上加入更多的元素和表現(xiàn)方法:
或者在文章內(nèi)插入圖標(biāo):
精彩的圖標(biāo)可以輕松的引用到網(wǎng)站的各個(gè)方面,并且在任意設(shè)備上可以保證最精致的狀態(tài),而不會(huì)失真。
Fontawasome4.7升級(jí)Fontawasome5.x的注意事項(xiàng)以及引用方式
Fontawasome4.7 版本的引用是 使用前綴 fa
比如 首頁(yè)一般我們會(huì)加入一個(gè)小房子的圖標(biāo),那么引用方式是 fa fa-home
這是Fontawasome4.7所有圖標(biāo)通用使用方式,而在Fontawasome5.x版本中(免費(fèi)),分為三種不同類別的圖標(biāo)
前綴 fas 實(shí)心圖標(biāo),這個(gè)前綴是使用的最多的,也是5.0版本中圖標(biāo)數(shù)量最多的
前綴fab 品牌圖標(biāo),這個(gè)前綴是引用品牌logo的,我們一般用于客服選項(xiàng) 比如QQ客服、微信客服等等,或者其他品牌內(nèi)容中
前綴fas 線性圖標(biāo),這個(gè)圖標(biāo)相對(duì)較少,是區(qū)別于實(shí)心圖標(biāo)的線性風(fēng)格圖標(biāo)。
示例使用:
比如我們查詢到下面的動(dòng)物實(shí)心圖標(biāo):
他的名稱是cat 那么我們?cè)谝脮r(shí) 輸入 fas fa-cat 的css類 即可引用到這個(gè)圖標(biāo)。
在主題中,引用較多的地方是 菜單,那么我們?cè)诓藛蔚腸ss類中輸入這個(gè)類名稱:
這樣即可顯示正確了
在主題各個(gè)選項(xiàng)內(nèi)容其他的區(qū)域使用圖標(biāo)時(shí),注意選項(xiàng)注釋說明 填寫正確的格式即可顯示出來各個(gè)圖標(biāo)。
關(guān)于Fontawasome5.x版本的介紹就到這里了,如果你有什么不明白的問題,可在此文章下留言給我們一起討論。