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

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

　　1.準備時間：

　　1-1進入網(wǎng)站，選擇圖標庫

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

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

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

　　1-4點擊右上方“購物車”

　　1-5這里是你選擇的圖標們，然后添加至項目，

　　可以選擇你擁有的項目，

　　或者點擊添加新項目。

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

　　2，使用時間：

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

　　解壓你下載的圖片。

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

　　這四個是必須引用的，

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

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

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

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

　　2-3打開你的項目：

　　2-4引入css樣式;

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

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

　　2-5將你需要的圖標的class名復(fù)制到你的項目里面

　　用瀏覽器打開查看效果：

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

　　是不是就可以了，如果你不想要div里面的字變色，可以直接寫id:before,因為字體庫就是用的before

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