如何将Iconfont的图标以Symbol方式引入web页面

1、首先在iconfont图标库中，找到需要的图标，点击购物车图标“添加入库”。

2、打开购物车，点击下方“添加至项目”按钮，如果没有项目，就新建一个。

3、在我的项目页，可以看到3种引入方式，以及图标的编号。

4、切换到Symbol方式，点击“查看在线链接”，生成以下代码并复制：

5、打开你的网页代码，添加script标签，将上面的代码粘贴过来：

6、然后加入控制图标样式的css代码（通用，引入一次就行）：

<style type="text/css">

    .icon {

       width: 1em; height: 1em;

       vertical-align: -0.15em;

       fill: currentColor;

       overflow: hidden;

    }

</style>

7、最后，使用svg标签引用图标。图标名称在iconfont“我的项目”中查看，参见第3步图片。

<svg class="icon" aria-hidden="true">

    <use xlink:href="#icon-xxx"></use>

</svg>

8、想要修改图标样式，可以通过font-size，color来调整：

9、想要增加或更换新的图标，只需重复1、2、3步骤，并在第4、5步更新一下代码，最后在第7步增加新图标的svg标签即可。