最近许多用户在寻找一种给WordPress导航菜单添加图标的简单方法。这篇文章将要跟大家分享的就是，在不用编辑代码的前提下怎样为导航菜单添加图标。
以下则是实现这项功能的具体步骤。
跟实现其他许多功能一样，首先我们需要安装并启用插件。在这里，我们需要一款菜单图标插件——Menu Image。插件启用后，打开主菜单下Appearance 中的Menus选项。进入界面你会发现在右边现有菜单的结构编辑框中出现以下界面：
然后点击“set image”按钮，上传想要作为导航菜图标的图片。在该按钮下方有“image size”选项，这里面是该插件自动生成的三个图标尺寸，分别是：24 x 24, 36 x 36,48 x 48 PX你可以任选一个作为你图标的尺寸。除此之外，你还可以选择标题与图标的位置关系，标题可以是在图标的后面或前面，也可以隐藏标题，只显示图标。
如果你对插件生成的尺寸不满意，也可以设置自己喜欢的图标大小。方法也很简单，你只要在主题文件下的 functions.php文件中添加以下代码或者是安装并启用site-specific 插件。
01 add_filter( 'menu_image_default_sizes', function($sizes){
02
03 // remove the default 36x36 size
04 unset($sizes['menu-36x36']);
05
06 // add a new size
07 $sizes['menu-50x50'] = array(50,50);
08
09 // return $sizes (required)
10 return $sizes;
11
12 });
除了以上方法之外，我们也可以通过手动编辑CSS文件来为导航菜单添加图标。这种方法适用于知道CSS保存路径的用户。要用这种方法，首先你要将图片上传到媒体库当中，然后复制黏贴到TEXT文档中。这些准备做完后打开Appearance 目录下的 Menus选项，点击右上角Screen Options按钮。然后选中CSS Class选项。如下图所示：
然后向下滚动鼠标，选择任意一项现有的菜单，你将会发现，在菜单结构编辑框中出现了一个CSS Classes选项如下图。我们需要做的就是给菜单添加一个CSS类，代码如下。
1 .homepage {
2 background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png');
3 background-repeat: no-repeat;
4 background-position: left;
5 padding-left: 5px;
6 }
然后我们需要将CSS文件添加到主题目录下，或者是主题目录下的stylesheet目录。
另外要注意的就是，这里的.homepage和URL要改成你所输入的CSS类名和之前记录在TEXT文件中的URL。由于使用不同的主题，所以可能还需要根据实际情况对CSS进行适当的调整知道你感觉满意为止。
这篇文章就介绍到这里，希望对您有所帮助，谢谢！
