【Modown主题优化】如何为网站导航菜单添加彩色图标

WordPress 添加图标，普遍使用的有三个，分别为 Dripicons、Iconfont、Font Awesome 的图标。

萌知使用的 Modown 主题自带 Dripicons 和 Iconfont 普通的黑白图标，所以需要添加这两款图标的话，直接使用相应的短代码即可。

Dripicons

Dripicons 图标使用参考：http://demo.amitjakhu.com/dripicons/
示例：<i class=”dripicons dripicons-home”></i>

Iconfont

Iconfont 图标使用参考：https://at.alicdn.com/t/project/1680534/b822903a-ee00-4a0f-9b62-fc2d380cbac7.html
示例：<i class=”icon icon-home”></i>

Font Awesome

如果想要使用 Font Awesome 图标，以目前最新的 V6 免费版本为例，在主题设置“自定义代码”中，引入 css 文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

然后使用短代码 <i class=”fas fa-home”></i> 或者 <i class=”fab fa-home”></i> 即可（早期 V4 版本的短代码为 <i class=”fa fa-home”></i>）。

PS，为避免个别情况下不对齐的问题，可以使用 span 标签包裹，示例：<span><i class=”fas fa-home”></i> 菜单名称</span>

Emoji

直接复制使用，例如，最常用的 Home 图标，任选一种复制即可：

🏠 （HTML 实体）
\u{1F3E0} （Unicode）
🏠 （直接复制）

彩色图标

参考教程：https://www.iconfont.cn/help/detail?spm=a313x.manage_type_myprojects.i1.d8cf4382a.1d673a81Lh6PGo&helptype=code

阿里图标官方提供Unicode、Font class、Symbol三种引入方式，下文教程提供的是Symbol方式，但实测无效，仅供参考

实测无效，仅供参考
打开阿里巴巴矢量图标库网址：https://www.iconfont.cn/
登陆网站后，点击上方“资源管理”—“我的项目”按钮，创建一个项目（名称最好为字母）；
找到想用的图标后，鼠标指针放在图标上，点击第一个购物车标志的“添加入库”
再次点击页面右上方购物车标志按钮，“添加至项目”（注意选择加入刚才创建的项目）
进入Wordpress管理后台，外观—— Modown 主题设置——样式，在“自定义CSS样式”添加以下代码：
```
/* 彩色iconfont */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
```
在“自定义头部代码”添加以下代码：
```
<script src="https//at.alicdn.com/t/font_更改为自己的.js"><script>
```
注意把“//at.alicdn.com/t/font_更改为自己的.js”替换成自己的，在我的项目中可以复制
最后，在外观——菜单——导航标签的菜单名称前，添加以下代码即可：
```
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>
```
代码“##icon-xxx”中，# 号后内容修改为您需要使用的图标名称。