JustNews主题菜单添加彩色阿里图标

最近发现阿里的彩色图标也挺好看，当然我在16年的时候就用过阿里图标了，那时候还是用的Begin主题，默认不支持彩色图标。最近这段时间，看了下JustNews主题，竟然默认支持彩色图标，当然使用阿里图标的Symbol模式引入字体，就可以使用彩色图标。

阿里图标，即Iconfont字体图标，可以按需引用，即需要哪个图标，就添加哪个图标，不会产生太大的资源引入。所以，阿里图标更受站长们青睐。

今天，我们主要说下JustNews主题如何使用Iconfont图标，以下简称阿里图标。首先，点击打开阿里图标网址。然后，注册或登录账号，这里我直接用的新浪微博账号登陆了，方便快捷。

图标添加

接下来，直接开始搜索你想要的图标，比如首页这个图标：

找到你想要的图标，将鼠标移过去，点击第一个按钮，添加入库

按照上述步骤，添加你所需要的那些图标，当然以后你还可以添加图标。

接着，点击右上角购物车样子的那个按钮，点击添加至项目，如果没有项目，直接新建一个项目即可，最后确认添加。

JustNews主题阿里图标使用方法

当你添加完图标后，点击顶部的资源管理，下拉菜单点击我的项目。这里列出了你添加的所有图标，我们选择Symbol选项，点击生成链接，复制这个链接代码（js链接）

最后，再到JustNews主题设置界面，风格样式：图标设置那里，将复制的链接，粘贴到Iconfont选项里。

然后，我们再后台再编辑菜单，在各个菜单项目前添加如下代码：

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

即可在菜单名称前添加好图标，保存菜单就可以在前台看到菜单前多了彩色图标。

对于其他菜单，想要更换图标，请求购上述代码中的#icon-shouye字样即可。这个字样，在阿里图标项目管理，那里可以看到各个图标的代号，复制替换即可。

到此，Justnews主题的菜单图标设置教程就可以了。下面，我们再说下其他主题如何使用吧：

其他Wordpress主题怎么用阿里图标

这部分内容，JustNews主题无需查看

引入阿里的js，你需要在主题任意位置引用即可。最好是在head之间。

此外，你还需要引入如下CSS代码：

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

最后，在调用图标时，与justnews主题也有所不同，需要使用如下代码调用图标：

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

替换图标时，替换其中的xxx即可。

结果展示

当然，关于什么是彩色菜单图标，可以查看本站的菜单部分，下面给几张图展示下吧：