由于網站上直接調用圖片格式的圖標使用上占用的體積比較大且顯示不夠清晰，下面可以通過使用字體圖標來解決這個問題。icomoon是一個很全的國外圖標字體庫,可以應用在網站和APP上，也可以生成圖片，制作在PDF上。
具體使用步驟如下：
1.打開官網https://icomoon.io/

2.點擊右上角的icoMoon APP，選擇圖標

3.選擇好圖標，圖標選擇后可進行刪除，編輯等操作，然后點擊右下角的Genetate Font，Download下載圖標
4.這時候會獲得一個icomoon壓縮文件，其中下載的demo.html文件可在瀏覽器中直接打開對照使用，解壓后的文件如下
5.配置使用圖標，正式使用的文件有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>

注意事項：不用的圖標建議不要選擇，如果全部選擇會增加icomoon.woff等文件的體積大小，導致網站上加載比較慢，所以，為了提高網站的性能，建議只選擇需要的圖標；注意iconMoon字體圖標免費版選擇圖標功能存到瀏覽器緩存中，如果瀏覽器緩存清理或丟失則數據丟失，需要長期保存選擇的圖標需要購買付費版；如果圖標不夠用，可以在網頁上部search圖標，或者在下面點擊 Add Icons From Library加載新的圖標庫進行使用。

上一篇：如何操作iframe父頁面中的標簽元素?

下一篇：FTP遠程連接Windows服務器中網站防火墻設置的安全問題