網(wǎng)站過(guò)多的圖片引起網(wǎng)站打開(kāi)速度的緩慢，這時(shí)候就要想辦法解決問(wèn)題，一個(gè)是壓縮圖片，但是過(guò)量的的壓縮又會(huì)引起圖片的模糊，而一些形狀之類的圖片完全可以用css或者字體實(shí)現(xiàn)，一些形狀我已經(jīng)在之前的博客里寫了出來(lái)，這里講的是用圖標(biāo)庫(kù)的方法來(lái)代替圖片;下面石家莊做網(wǎng)站的技術(shù)人員給大家分享具體內(nèi)容。

　　這里我用的是阿里的圖標(biāo)庫(kù)，官方鏈接：http://www.iconfont.cn/

　　1.準(zhǔn)備時(shí)間：

　　1-1進(jìn)入網(wǎng)站，選擇圖標(biāo)庫(kù)

　　1-2選擇你需要的圖標(biāo)，比如這個(gè)錯(cuò)誤圖標(biāo)(或者在上方搜索處搜索你想要的圖標(biāo)，再或者你可以用AI做一個(gè)圖標(biāo)上傳到項(xiàng)目{相對(duì)更麻煩})

　　1-3鼠標(biāo)懸浮上去，出現(xiàn)一個(gè)購(gòu)物車，點(diǎn)擊

　　這時(shí)候就會(huì)進(jìn)入平常在淘寶類似買東西的一個(gè)購(gòu)物車

　　1-4點(diǎn)擊右上方“購(gòu)物車”

　　1-5這里是你選擇的圖標(biāo)們，然后添加至項(xiàng)目，

　　可以選擇你擁有的項(xiàng)目，

　　或者點(diǎn)擊添加新項(xiàng)目。

　　進(jìn)入項(xiàng)目，這時(shí)候就會(huì)發(fā)現(xiàn)你的項(xiàng)目里面多出了你的創(chuàng)建的東西：

　　2，使用時(shí)間：

　　2-1.然后選擇下載至本地，將這三個(gè)圖標(biāo)形成的庫(kù)下載下來(lái)(相對(duì)而言，圖標(biāo)越多，相對(duì)你比使用圖片效果更強(qiáng)，加載更快。)

　　解壓你下載的圖片。

　　2-2然后打開(kāi)文件。出來(lái)的代碼

　　這四個(gè)是必須引用的，

　　這三個(gè)是引用方式的介紹及使用方法;

　　這兩個(gè)是你引用的方式j(luò)s或者css(只選擇一個(gè));

　　這里我要說(shuō)的是css的適用方法：

　　將五個(gè)文件放入你的css里面：

　　2-3打開(kāi)你的項(xiàng)目：

　　2-4引入css樣式;

　　查看庫(kù)里面的文件是否用上，如果不確定，可以自己重新用編譯器的提示引一遍。

　　用瀏覽器打開(kāi)下載項(xiàng)目里面的css提示文件，并用F12審查

　　2-5將你需要的圖標(biāo)的class名復(fù)制到你的項(xiàng)目里面

　　用瀏覽器打開(kāi)查看效果：

　　2-6你可以再單獨(dú)寫樣式圖標(biāo)變色或者變大，如果怕沖突，可以再給div加一個(gè)id值

　　是不是就可以了，如果你不想要div里面的字變色，可以直接寫id:before,因?yàn)樽煮w庫(kù)就是用的before

　　好了，這就是石家莊做網(wǎng)站的小編給大家講解的阿里圖標(biāo)庫(kù)的使用方法了，其實(shí)說(shuō)起來(lái)并不難，只是稍微有點(diǎn)麻煩點(diǎn)，前期準(zhǔn)備時(shí)間有點(diǎn)多，但是相對(duì)，這樣提升了網(wǎng)站的打開(kāi)速度。