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

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

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

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

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

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

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

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

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

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

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

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

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

2，使用時間：

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

解壓你下載的圖片。

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

這四個是必須引用的，

這三個是引用方式的介紹及使用方法;

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

這里我要說的是css的適用方法：

將五個文件放入你的css里面：

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

2-4引入css樣式;

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

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

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

用瀏覽器打開查看效果：

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

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

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

當(dāng)前名稱：圖標(biāo)庫代替圖片的方法
本文來源：http://www.muchs.cn/news24/312624.html

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

廣告

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