在前端開(kāi)發(fā)中,面對(duì)psd稿上的圖標(biāo)時(shí)最好的實(shí)現(xiàn)方法是使用字體圖標(biāo),這樣之后需要修改其鼠標(biāo)懸浮hover及active狀態(tài)效果時(shí),能夠較簡(jiǎn)單方便的改變其效果,而圖標(biāo)大小、顏色都能夠像字體一樣使用font-size、color改變。在我們剛接觸時(shí)我們會(huì)使用下載iconfont的css到本地進(jìn)行引用,但是這樣會(huì)存在一些弊端,后期添加、修改圖標(biāo)時(shí)我們需要在下載相關(guān)的文件然后引用到項(xiàng)目中,那我們有沒(méi)有更方便的方法呢?當(dāng)然了,那就是使用在線引用的方法。
一、iconfont有三種國(guó)引用方式:Unicode、Font class、Symbol,建議使用Font Class的引用方式
二、具體使用步驟:
1.登錄/注冊(cè)阿里巴巴矢量圖官網(wǎng)(iconfont)
2.搜索相關(guān)圖標(biāo)--->加入購(gòu)物車
3.購(gòu)物車--->添加至項(xiàng)目
4.我的項(xiàng)目--->查看在線鏈接地址
5.HTML頁(yè)面引用css樣式