Dux主题最新版本添加导航菜单图标方法

这个Dux主题买得比较早，2019年就买了，当时版本还是6.x，给菜单添加图标也很简单，到font-awesome官方找到图标代码直接加在菜单前面就可以了，比如：

<i class="fa fa-home"></i>首页

Dux目前最新版本是9.1，我试了下直接添加不得行了，现在操作步骤相对多一些，记录下来，方便下次忘了自己看。

首先，我们到Iconfont平台(地址：iconfont.cn)找合适的图标，直接可以用微信、微博或者GifHub登录即可。Iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

注册(登录)后直接网页就有个搜索框，输入你想要的图标名字，比如服务器，一下出来九十多页，找到自己喜欢的，鼠标移上去可以看到上面有个购物车一样的图标，如下图，点击即可添加入库。

把自己想要的都添加之后，点击网站右上角的购物车，然后添加至项目(之前没有过就+一个新项目)，然后网页跳转至我的项目，这里看到我们之前选的图标，代码。

把代码复制下来，然后Dux主题设置-自定义代码-自定义css样式中加入：

/* 下面这段改成自己的项目代码 */
@font-face {
  font-family: 'iconfont';  /* Project id 4824669 */
  src: url('//at.alicdn.com/t/c/font_4824669_vckrgtlxik.woff2?t=1739334036648') format('woff2'),
       url('//at.alicdn.com/t/c/font_4824669_vckrgtlxik.woff?t=1739334036648') format('woff'),
       url('//at.alicdn.com/t/c/font_4824669_vckrgtlxik.ttf?t=1739334036648') format('truetype');
}
/* 这段必须有 */
.iconfont{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

注意上面的代码，必须的部分一定要加上，之后我们到wordpress后台外观，菜单中设置就好了。找到相应的图标，复制图标代码，比如：，到菜单设置就是：

<i class="iconfont">&#xe607;</i>服务器

Dux主题购买地址：https://themebetter.com/