查詢方法
請點擊進入Fontawasome5.x 圖標(biāo)查詢頁面
進入之后可見所有圖標(biāo),右側(cè)下方可選各個分類的圖標(biāo),可根據(jù)自身要求連續(xù)選擇所需的分類。
注意,切換版本之前,請確保安裝了 font awesome1.02本地化插件 否則圖標(biāo)則會顯示不全
Fontawasome5.x版本介紹:多達1500+的免費精致圖標(biāo)
我們在之前的開發(fā)中,使用了Fontawasome這一字體圖標(biāo),字體圖標(biāo)的好處是:
- 不管在什么設(shè)備上,總能最精細的顯示出來,而不會失真。
- 只需要輸入一個圖標(biāo)的名稱,即可在網(wǎng)頁上顯示想要的圖標(biāo)
- 顏色可以隨意更改,相比圖片而言,字體圖標(biāo)有更多的靈活的樣式
- 可以輕松的制作優(yōu)美的動態(tài)圖標(biāo),比如旋轉(zhuǎn),縮放,都可以輕松實現(xiàn)。
之前我們在開發(fā)過程中使用的是Fontawasome4.7版本,最近Fontawasome5已經(jīng)趨于成熟,并且有了完全壓倒性優(yōu)勢。
Fontawasome 5版本增加了除網(wǎng)頁常用圖標(biāo)外的更多分類和可應(yīng)用于更多行業(yè)的圖標(biāo):

如上圖所示,我們可以根據(jù)需要,去切換各個分類找到適合于我們的圖標(biāo)了。
比如導(dǎo)航上,根據(jù)我們的行業(yè)特點,給每個導(dǎo)航項目加入圖標(biāo):

在圖標(biāo)應(yīng)用上加入更多的元素和表現(xiàn)方法:

或者在文章內(nèi)插入圖標(biāo):

精彩的圖標(biāo)可以輕松的引用到網(wǎng)站的各個方面,并且在任意設(shè)備上可以保證最精致的狀態(tài),而不會失真。
Fontawasome4.7升級Fontawasome5.x的注意事項以及引用方式
Fontawasome4.7 版本的引用是 使用前綴 fa
比如 首頁一般我們會加入一個小房子的圖標(biāo),那么引用方式是 fa fa-home
這是Fontawasome4.7所有圖標(biāo)通用使用方式,而在Fontawasome5.x版本中(免費),分為三種不同類別的圖標(biāo)
- 前綴 fas 實心圖標(biāo),這個前綴是使用的最多的,也是5.0版本中圖標(biāo)數(shù)量最多的
- 前綴fab 品牌圖標(biāo),這個前綴是引用品牌logo的,我們一般用于客服選項 比如QQ客服、微信客服等等,或者其他品牌內(nèi)容中
- 前綴fas 線性圖標(biāo),這個圖標(biāo)相對較少,是區(qū)別于實心圖標(biāo)的線性風(fēng)格圖標(biāo)。
示例使用:
比如我們查詢到下面的動物實心圖標(biāo):

他的名稱是cat 那么我們在引用時 輸入 fas fa-cat 的css類 即可引用到這個圖標(biāo)。
在主題中,引用較多的地方是 菜單,那么我們在菜單的css類中輸入這個類名稱:

這樣即可顯示正確了
在主題各個選項內(nèi)容其他的區(qū)域使用圖標(biāo)時,注意選項注釋說明 填寫正確的格式即可顯示出來各個圖標(biāo)。
關(guān)于Fontawasome5.x版本的介紹就到這里了,如果你有什么不明白的問題,可在此文章下留言給我們一起討論。