WordPress 导航菜单前方添加彩色图标（iconfont图标）

记录一下如何在菜单前添加精美的图标：

一、阿里巴巴矢量图标库

网址如下：https://www.iconfont.cn/

1、登陆网站注册账号后，点击上方“资源管理”—“我的项目”按钮，创建一个项目；

2、在库中找到喜欢的图标后，将鼠标指针放在图标上，点击 购物车 将喜欢的图标 添加入库，然后再次点击页面右上方购物车标志按钮，将图标添加达到刚刚创建的项目中（注意一定要选择并确定加入刚才创建的项目）

3、之后，页面一般会自动跳转到“我的项目”（如下图），点击生成代码的提示，会自动生成一串代码，待会会使用到。

二、Wordpress 中添加代码

1、以DUX主题设置为例：

通过管理后台，外观——DUX主题设置——自定义代码，在“自定义头部代码”中添加以下代码，其中 //at.alicdn.com/t/font_3367472_n3lnkilqwqk.js 加粗部分更换为自己项目刚刚生成的代码：

<script type="text/javascript" src="//at.alicdn.com/t/font_3367472_n3lnkilqwqk.js"></script>

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    .b2small.new {
    background: #f35;
    background: linear-gradient(to right,#00cf46 0%,#00b96c 100%);
}

2、在菜单导航标签前添加以下代码：

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

其中 icon-remai，可以更换为你喜欢的图标代码

3、菜单栏展示效果如下（本站菜单图标样式）