網(wǎng)站過多的圖片引起網(wǎng)站打開速度的緩慢,這時(shí)候就要想辦法解決問題,一個(gè)是壓縮圖片,但是過量的的壓縮又會(huì)引起圖片的模糊,而一些形狀之類的圖片完全可以用css或者字體實(shí)現(xiàn),一些形狀我已經(jīng)在之前的博客里寫了出來,這里講的是用圖標(biāo)庫(kù)的方法來代替圖片;下面石家莊做網(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ù)下載下來(相對(duì)而言,圖標(biāo)越多,相對(duì)你比使用圖片效果更強(qiáng),加載更快。)
解壓你下載的圖片。


2-2然后打開文件。出來的代碼

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

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

這兩個(gè)是你引用的方式j(luò)s或者css(只選擇一個(gè));
這里我要說的是css的適用方法:

將五個(gè)文件放入你的css里面:
2-3打開你的項(xiàng)目:

2-4引入css樣式;
查看庫(kù)里面的文件是否用上,如果不確定,可以自己重新用編譯器的提示引一遍。

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


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

用瀏覽器打開查看效果:

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


是不是就可以了,如果你不想要div里面的字變色,可以直接寫id:before,因?yàn)樽煮w庫(kù)就是用的before
好了,這就是石家莊做網(wǎng)站的小編給大家講解的阿里圖標(biāo)庫(kù)的使用方法了,其實(shí)說起來并不難,只是稍微有點(diǎn)麻煩點(diǎn),前期準(zhǔn)備時(shí)間有點(diǎn)多,但是相對(duì),這樣提升了網(wǎng)站的打開速度。