由于網(wǎng)站上直接調(diào)用圖片格式的圖標(biāo)使用上占用的體積比較大且顯示不夠清晰，下面可以通過(guò)使用字體圖標(biāo)來(lái)解決這個(gè)問(wèn)題。icomoon是一個(gè)很全的國(guó)外圖標(biāo)字體庫(kù),可以應(yīng)用在網(wǎng)站和APP上，也可以生成圖片，制作在PDF上。
具體使用步驟如下：
1.打開(kāi)官網(wǎng)https://icomoon.io/

2.點(diǎn)擊右上角的icoMoon APP，選擇圖標(biāo)

3.選擇好圖標(biāo)，圖標(biāo)選擇后可進(jìn)行刪除，編輯等操作，然后點(diǎn)擊右下角的Genetate Font，Download下載圖標(biāo)
4.這時(shí)候會(huì)獲得一個(gè)icomoon壓縮文件，其中下載的demo.html文件可在瀏覽器中直接打開(kāi)對(duì)照使用，解壓后的文件如下
5.配置使用圖標(biāo)，正式使用的文件有fonts和style.css，其中css需要注意路徑：
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ldkkeh');
  src:  url('fonts/icomoon.eot?ldkkeh#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ldkkeh') format('truetype'),
    url('fonts/icomoon.woff?ldkkeh') format('woff'),
    url('fonts/icomoon.svg?ldkkeh#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
...
html例如:< span class="icon-whatsapp">< /span>

注意事項(xiàng)：不用的圖標(biāo)建議不要選擇，如果全部選擇會(huì)增加icomoon.woff等文件的體積大小，導(dǎo)致網(wǎng)站上加載比較慢，所以，為了提高網(wǎng)站的性能，建議只選擇需要的圖標(biāo)；注意iconMoon字體圖標(biāo)免費(fèi)版選擇圖標(biāo)功能存到瀏覽器緩存中，如果瀏覽器緩存清理或丟失則數(shù)據(jù)丟失，需要長(zhǎng)期保存選擇的圖標(biāo)需要購(gòu)買付費(fèi)版；如果圖標(biāo)不夠用，可以在網(wǎng)頁(yè)上部search圖標(biāo)，或者在下面點(diǎn)擊 Add Icons From Library加載新的圖標(biāo)庫(kù)進(jìn)行使用。

上一篇：如何操作iframe父頁(yè)面中的標(biāo)簽元素?

下一篇：FTP遠(yuǎn)程連接Windows服務(wù)器中網(wǎng)站防火墻設(shè)置的安全問(wèn)題