眾所周知,在一個(gè)app中我們會(huì)用到很多的圖標(biāo),有的時(shí)候這些圖標(biāo)還需要顯示不同的顏色,大小等等.所以就有了iconfont的出現(xiàn).iconfont的官方網(wǎng)址.這是阿里巴巴矢量圖標(biāo)庫(kù),用這個(gè),可以自由的確定圖標(biāo)的大小,顏色,不在需要等美工同學(xué)做出相應(yīng)尺寸的圖.
說(shuō)一下使用方法和步驟:
第一步,當(dāng)然是打開(kāi)iconfont的官方網(wǎng)址(語(yǔ)文水平不高,覺(jué)得啰嗦的看重點(diǎn)就行...).
image.png
可以在上圖畫(huà)紅框的地方輸入漢字來(lái)搜索你需要的圖標(biāo)(例如:刷新,搜索等等);
第二步,查找你需要的圖標(biāo).
image.png
image.png
此時(shí)會(huì)搜索出所有的刷新圖標(biāo),選擇自己喜歡的就好.
第三步,重點(diǎn)開(kāi)始了,想要在程序中使用iconfont,那就需要下載.
1.先把喜歡的圖標(biāo)加入購(gòu)物車(chē).(將鼠標(biāo)放在圖標(biāo)上就會(huì)出現(xiàn)三個(gè)按鈕),點(diǎn)擊第一個(gè)按鈕,就加入購(gòu)物車(chē)了.我會(huì)多選擇幾個(gè)圖片加入購(gòu)物車(chē),來(lái)更好的說(shuō)明使用方法.
image.png
2.點(diǎn)擊右上角的購(gòu)物車(chē)圖標(biāo),打開(kāi)購(gòu)物車(chē).
image.png
我一共將5張圖片加入購(gòu)物車(chē),下面的紅框是重點(diǎn):我們需要點(diǎn)擊下載代碼按鈕.
3.解壓下載的文件后,打開(kāi)文件夾,如圖:
image.png
4.打開(kāi)demo_unicode.html文件后,如圖:
image.png
image.png
第四步,對(duì)照demo來(lái)自己測(cè)試一遍,用起來(lái)很方便.
