iconfont三種方式的優缺點
unicode
優點：
1.兼容性最好，支持ie6+
2.支持按字體的方式去動態調整圖標大小，顏色等等
缺點：
1.不支持多色圖標
2.在不同的設備瀏覽器字體的渲染會略有差別，在不同的瀏覽器或系統中對文字的渲染不同，其顯示的位置和大小可能會受到font-size、line-height、word-spacing等CSS屬性的影響，而且這種影響調整起來較為困難
3.不直觀，看unicode碼很難分辨什么圖標
fontclass
1.兼容性良好，支持ie8+
2.相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么
symbol
1.支持多色圖標了，不再受單色限制
2.支持像字體那樣通過font-size,color來調整樣式。
3.支持 ie9+
4.可利用CSS實現動畫
5.減少HTTP請求
6.矢量，縮放不失真
7.可以很精細的控制SVG圖標的每一部分
下面是使用symbol方式的詳細步驟
使用步驟
- 進入https://www.iconfont.cn/選擇一個你喜歡的圖標庫，將圖標加入購物車。
- 點擊右上角購物車打開購物車
- 加入項目，沒有就新建一個項目，點擊確定，跳轉到我的項目
- （菜單欄->圖標管理->我的項目）,點擊下載到本地
- 把如圖js文件移動到項目中
- 使用 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>icon</title>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-food-macaron"></use>
</svg>
<script src="./icon/iconfont.js"></script>
</body>
</html>
注意xlink:href的值前面帶有
#，在我的項目中，每個圖標對應一個id。
補充
快速將多個圖標添加到購物車，控制台輸入如下代碼執行
var icon=document.getElementsByClassName('icon-gouwuche1');
for(var i=0;i<icon.length;i++){
icon[i].click();
}