在主页导航菜单插入阿里矢量图标,效果如图:

1.在阿里矢量图标库了找到自己喜欢的图标(iconfont-阿里巴巴矢量图标库)。

2.把挑选好的图标放到购物车里。

3.点击结算,创建新的项目,项目名字最好是英文,如果不是英文后面可能报错。

4.点击Symbol 引用和查看代码:

5.把该js代码复制到主题的footer.php文件最后。

6.然后把下面这段代码复制到CSS文件里面(建议放到主题的额外CSS里面,不然很可能出现没有调用代码的情况)!

<style type=”text/css”>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

7.回到阿里矢量图库,复制图标代码。

8.把图标代码插入主题中,用以下方式插入:

<svg class=”icon” aria-hidden=”true”>
<use xlink:href=”#你复制的图标代码”></use>
</svg>

9.保存后,回到主页刷新网页,即可出现阿里矢量图标。