图标字体iconfont的使用
什么是iconfont?
iconfont就是字面上的意思,叫做“字體圖標(biāo)”,將一套圖標(biāo)集以字體文件的形式封裝,并通過(guò) CSS 的 @font-face 作為 Web Font 調(diào)用。
iconfont的好處是什么
眾所周知,以往我們圖片大多是用png。但是png在使用過(guò)程中卻有眾多不變之處,譬如每個(gè)圖片都是一個(gè)請(qǐng)求,當(dāng)網(wǎng)頁(yè)圖片較多時(shí),會(huì)比較影響加載的速度,不同分辨率的手機(jī),為了響應(yīng)式的展示頁(yè)面,可能加有2倍圖、3倍圖等,使需要加載的資源變多,影響網(wǎng)頁(yè)的性能。
那么iconfont的好處有哪些呢:
- 輕量性:一個(gè)圖標(biāo)字體比一系列的圖像(特別是在Retina屏中使用雙倍圖像)要小。一旦圖標(biāo)字體加載了,圖標(biāo)就會(huì)馬上渲染出來(lái),不需要下載一個(gè)圖像。可以減少HTTP請(qǐng)求,還可以配合HTML5離線存儲(chǔ)做性能優(yōu)化。每個(gè)小圖標(biāo)只有幾kb,大大節(jié)省了加載時(shí)間。
- 靈活性:圖標(biāo)字體可以用過(guò)font-size屬性設(shè)置其任何大小,還可以加各種文字效果,包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果。可以在任何背景下顯示。
- 兼容性:網(wǎng)頁(yè)字體支持所有現(xiàn)代瀏覽器,包括IE低版本。詳細(xì)兼容性可以點(diǎn)擊這里。
- 可縮放,可以很方便的改變圖標(biāo)的大小。不用擔(dān)心不同分辨率的設(shè)備上展示差異問(wèn)題。
- 矢量,iconfont 是矢量的并且具有獨(dú)立的分辨率,不管在高分辨率還是低分辨率,不管是在網(wǎng)頁(yè)還是手機(jī)端,都具有很好的展示效果,不會(huì)出現(xiàn)鋸齒或者馬賽克模糊。
如何使用iconfont
第一步:
下載所需圖標(biāo)的svg文件
第二步
打開(kāi)iconfont 點(diǎn)擊IcoMoon App,再點(diǎn)擊Import Icons 將剛才下載的svg文件導(dǎo)入
第三步
選中之后 點(diǎn)擊Generate Font
第四步
點(diǎn)擊Download下載
上面完成了svg轉(zhuǎn)為iconfont,你也可以在iconfont下載自己自己所需的圖標(biāo)字體
下面說(shuō)一下如何引入到自己的項(xiàng)目中
- 將下載的icomoon文件解壓縮,將icomoon里面的font文件夾放進(jìn)項(xiàng)目的src/assets/ 目錄下,style.css放進(jìn)src/assets/styles 目錄下
- 將style.css中對(duì)應(yīng)的代碼路徑調(diào)整正確
- 在main.js中引入css:import './assets/styles/style.css'
- 在代碼中想引入對(duì)應(yīng)圖標(biāo)只需寫上style.css中對(duì)應(yīng)的class名稱如
注:如不清楚對(duì)應(yīng)的類名,可參照下載包icomoon中的demo.html。在網(wǎng)頁(yè)中打開(kāi)此文件即可。
轉(zhuǎn)載于:https://www.cnblogs.com/yangAL/p/8509993.html
總結(jié)
以上是生活随笔為你收集整理的图标字体iconfont的使用的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 微信小程序----手势锁详解
- 下一篇: 消息队列之RabbitMQ