字体图标 icon-font 的使用

矢量图标库
矢量：不会因为大小而变得模糊，因为本身就是文字类型，所以可以像文字一样操作。

• 1.在搜索框内查找
• 2.找到后加入购物车

• 3.解压后进入文件夹会看到3个demo.html，它会告诉你该如何使用。

下面聊聊其中的一种方法：
  symbol引用。demo上说，是未来的主流使用方法，是平台目前推荐的方法。

• 1.第一步，先引入生成的symbol代码

    <script src="./font/iconfont.js"></script>//注意路径

• 2.第二步，加入通用css代码（引入一次就行）
    字体的颜色，大小都可以在这里修改

.icon {
           width: 1em; 
           height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }

• 3.第三步，挑选相应图标并获取类名，应用于页面

 <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
 </svg>

对应图标的类名也有告诉我们。

总的来说，icon-font的使用只需要复制。其他两种方法也类似。