特别提醒：我在我的网站上使用6.1.1版本会失效，所以只能使用5.15.4版本，下面以这个版本举例如何使用。
比如我们搜索home相关的图标，显示如下界面：
我们点击“house-user”这个图标，弹出这个图标应用到HTML的代码，点击一下复制这个代码；
回到WordPress后台，点击外观-菜单，编辑菜单；
将上面复制的代码添加到导航标签-首页的前面，然后保存菜单，像下面这样：
回到前台看下效果：
我们看到图标正常显示了，但是不是太美观，我们可以添加一些样式让图标更好看，代码如下：
<i class="fas fa-house-user" style="font-size:30px; color:#15407c"></i>
其中"font-size"用于设置图标尺寸，"color"用于设置图标颜色，分别更改后面的数值就可以，将上面的代码复制到前面的导航标签前，效果如下：
好了，大功告成，到此你已经学会了如何给菜单前面添加图标了，是不是很爽呀？当时我捣鼓了两天，终于用上面的方法解决了这个问题，可是还没有等我高兴两天，问题出现了；某天早上打开网站准备继续捣鼓，发现菜单前面的图标居然不显示了，检查添加到header.php中的代码，没有问题呀，我到现在也没搞明白是为什么，于是继续捣鼓。上面的方法说白了是链接引用别人网站的东东，我要是能把图标字体和CSS样式文件放到我自己的网站上是不是就要靠谱多了？说干就干，于是有了下面第二种方法，而且经过测试也是没问题的。
三、WordPress网站菜单前添加图标的第二种方法
3.1、下载font awesome图标字体文件
首先我们要先下载图标字体文件，放心我很良心的，下面是地址：
官网下载地址：官网下载
备用下载地址：网盘下载
进入官网后你可以看到Font Awesome的各个版本，推荐选择5或者6下载就好了，如果官网打不开的话你也可以下载我放到网盘的版本。
3.2、解压图标字体文件，删除多余字体和样式
下载完成后，解压图标字体文件，以6.1.1版本为例，解压完成后，你应该看到的是下面这样子，我们需要的只是css和webfonts这两个文件夹，其他的都可以删掉；
3.3、上传图标字体文件到网站
删除多余的文件后，我们将v6版本的整个文件上传到网站的主题目录下，一定是主题目录，否则的话估计需要修改其他文件，如果你和我一样小白的话老老实实上传到主题目录下（此外多句嘴，关于上传你可以使用ftp上传，也可以直接在宝塔面板上传，如果你看我这篇文章学习捣鼓菜单图标了，那上传应该没问题了吧），像下面这样：
需要注意的是，css和webfonts这两个文件夹必须是同级目录，也就是说必须放同一个文件夹下面，这点官方有详细说明，只是我英语不好，词典边翻译边看，手动尴尬；
官方教程地址：查看官方教程
3.4、在header.php中引用样式文件
和前面一样，我们要在header.php中添加一段代码引用样式文件，代码如下：
<!--load all Font Awesome styles --> <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
将代码中的"your-path-to-fontawesome"更换为你自己的地址，像我自己网站的话就长下面这样：
<link href="https://miclass.cn/wp-content/themes/twentytwentytwo/fontawesome-v6/css/all.css" rel="stylesheet">
3.5、使用图标字体
使用方法就和前面一样，查找想使用的图标，复制相应的代码到相应的位置，就大功告成了，而且这种方法图标和样式文件都在自己的服务器上，无论怎样都感觉要放心点。
最后把相关网址放在下面，方便大家查询：
Font Awesome官网：点击打开官网
Font Awesome各个版本地址：官网各版本下载
备用下载地址（百度网盘）：点击下载
Font Awesome图标查询地址：图标查询
Font Awesome官方教程：查看教程
最后，菜单前面加图标这个小问题都折腾了我几天时间，我把所了解到的方法都写在文章中了，而且亲测有效，我的小站聚米学社也是这样实现的（当然我这小破站也还在折腾中...），如果觉得本文对你有用的话，点击下方“赞赏”支持下我吧，也可以记住我的小站，后期会更新更多硬核干货哦，谢谢！
