把阿里图标库引入到我的WordPress主题菜单栏中

文章引入

本站使用的是b2主题虽然b2主题提供了一些图标，但是图标都比较普通我相信使用的都知道，基本上都太是自己想要的效果而且你能用的图标基本上WordPress都是一些灰白色的难看死了，我就直接把阿里图标库给引进来了，阿里图标库里面成千上万个图标随便自己定义使用。

教程开始

1、打开阿里图标库官网：https://www.iconfont.cn/，登录自己的账号。

2、创建自己的项目，如果没有项目则先创建一个项目：在资源管理中点击我的项目即可。

如何将里面的图标添加到自己的项目呢？很简单，直接将图标点击添加到购物车，点击购物车就可以看到了可以添加到自己的项目中去。

3、在我的项目中点击symbol按钮

4、第一次进入这个页面会出现查看在线链接点击它，在点击复制代码

//at.alicdn.com/t/c/font_5009374_h1njqq8usqj.js

5、复制代码后直接引入到自己的WordPress主题中去，有的主题在主题设置中→自定义底部代码→添加下面的代码：（下面src=“这里是填写你自己的JS代码，自己替换）

<script src="//at.alicdn.com/t/font_2931246_we7ddtq72go.js">
</script>

如果主题中没有自定义底部代码到：footer.php这个文件中，粘贴到最后一行就行。

6、上面就已经引入完成了，接下来是使用图标了，使用图标很简单直接复制我提供给你的下面这段代码，替换其中的href=”#iconxxx”中的图标代码就行。

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

里面的href=”#iconxxx”是需要自己替换成自己项目中的图标代码

到自己菜单中粘贴就行。

最后我们看看效果吧！

B2主题之前是需要添加下面这段代码，如果不知道怎么使用的也可以不用添加没事，之前的版本在不添加是显示不出来，如果遇到不显示的情况就添加到自己主题的style.css文件中去就行。

/*小图标*/
.icon {
    width: 1.2em; height: 1.2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
/*小图标结束*/

最后说明给各位新站长图标默认的大小是16px的如果你觉得小了，可以根据自己的文件大小自定义调整显示大小更改css就行，本站使用大小为19px，16实在是太小了不美观。

如果不知道咋调整的可以在星球中提交你的问题。