DUX主题添加菜单图标教程

我们在建站的时候，为了美观，常常给菜单栏添加图标，有些主题模板自带了相关功能，有些主题则需要自行修改，挖主机使用的DUX主题，给菜单栏添加图标就相当方便。DUX主题8.0版本已经去除了Fontawesome字体库，目前DUX主题添加菜单图标最为便捷的方式是通过iconfont。

一、创建项目

1.打开IconFont官网，注册账户。

2.搜索并选择图标，添加入库。需要使用多个图标可一次性添加多个后再进行下一步。

3.在购物车里将图标添加至项目（没有项目点右上角加号新建）。

二、引入JS文件

1.在iconfont网站【资源管理-我的项目】处，切换到【Symbol】标签，生成在线链接。注意：每次添加图标进项目之后都要重新生成链接并在网站后台更新。

3.在【外观-DUX主题设置-自定义代码-自定义头部代码】处引入以上JS文件（将链接替换为上一步生成的链接）：

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

三、自定义CSS

在【外观-DUX主题设置-自定义代码-自定义CSS样式】处填入以下代码：

/* 彩色iconfont */
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;}

四、修改菜单

在WordPress后台【外观 – 菜单】处，修改菜单，以显示菜单图标。将以下代码添加到导航标签处：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-fuwuqi3"></use></svg> 国外VPS

将其中的#icon-fuwuqi3替换为自己项目中的图标名称，可通过如下方法自行修改：

五、显示效果