圖標(biāo)庫(kù)代替圖片的方法

網(wǎng)站過(guò)多的圖片引起網(wǎng)站打開速度的緩慢，這時(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然后打開文件。出來(lái)的代碼

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

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

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

這里我要說(shuō)的是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í)說(shuō)起來(lái)并不難，只是稍微有點(diǎn)麻煩點(diǎn)，前期準(zhǔn)備時(shí)間有點(diǎn)多，但是相對(duì)，這樣提升了網(wǎng)站的打開速度。

當(dāng)前名稱：圖標(biāo)庫(kù)代替圖片的方法
本文來(lái)源：http://www.bm7419.com/news24/312624.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)、電子商務(wù)、商城網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)