iconfontのsymbol的使用

__上善若水發表於2019-07-21
Symbol

iconfontのsymbol的使用

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方式的詳細步驟

使用步驟

  1. 進入https://www.iconfont.cn/選擇一個你喜歡的圖示庫，將圖示加入購物車。
    iconfontのsymbol的使用
  2. 點選右上角購物車開啟購物車
  3. 加入專案，沒有就新建一個專案，點選確定，跳轉到我的專案
    iconfontのsymbol的使用
  4. （選單欄->圖示管理->我的專案）,點選下載到本地
    iconfontのsymbol的使用
  5. 把如圖js檔案移動到專案中
    iconfontのsymbol的使用
  6. 使用 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>

效果
iconfontのsymbol的使用

注意xlink:href的值前面帶有#，在我的專案中，每個圖示對應一個id。

補充

快速將多個圖示新增到購物車，控制檯輸入如下程式碼執行

var icon=document.getElementsByClassName('icon-gouwuche1');
for(var i=0;i<icon.length;i++){
    icon[i].click();
}

相關文章