【WP美化】WordPress导航菜单怎么添加个性图标

图标字体非常流行，其使用简单，与图片格式的小图标相比支持视网膜显示，可以无限放大。特别是一些响应式设计的主题模板，都会或多或少使用图标字体。我所经常用的wordpress主题就可以自定义图标字体（百度搜索 聚创盟 导航中就能看到），我们还可以单独为导航菜单上的项目也配上个性化的图标字体。

具体方法：

一、WP后台–插件–安装插件页面搜索：Font Awesome 4 Menus，下载安装并启用。

二、WP后台—外观—菜单，进入菜单设置页面，选择并编辑一个菜单项，在CSS类中输入一个图标字体选择器名称，如图：

如果在编辑菜单项目面板中无CSS类，可以打开右上角的“显示选项”，在显示菜单高级属性中勾选“CSS类”。（好多人不知道菜单里点哪能出来css类，这不就可以解决了！）

图标字体选择器名称，打开此页查看：http://fortawesome.github.io/Font-Awesome/icons/

点开一个认为合适的图标字体，在图标左下会显示类似：

[code]<i class=”fa fa-home”></i>[/code]

的代码，只需在菜单CSS类中输入fa fa-home就可以了。

当然这个图标字体库并不只局限于使用在导航菜单上，只要把相应的图标代码加到主题模板的相应位置，也同样可以显示。

如果认为上面插件提供的图标字体不符合自己的要求（其实这套Font Awesome图标字体早已烂大街），还可以自己做一套更加个性化的图标字体。

图标字体在线制作：https://icomoon.io/app/#/select
<fieldset><legend>以下再推荐两种插件来实现导航菜单图标</legend></fieldset>
1.Menu Icons插件（Menu Icons by ThemeIsle）

在导航菜单前插入一个图标可以使用 “Menu Icons” 插件（Menu Icons by ThemeIsle），安装插件之后可以在菜单的设置界面找到图标设置：

点击 Select icon 会弹出非常简单高效的图标设置界面，总共可以选择五组图标，分别是 Dashicone，Elusive，Font Awesome ， Genericons和Image，建议所有的菜单只用其中的一组，可以使图标显得整齐划一；其中的Image是选择网站的多媒体库中图片做图标。

选择一个图标之后你可以设置图标的大小、相对位置、在文字的前后和是否直接替换文字，功能非常方便和强大。
有人说，这个插件有一个很大的缺点，就是不管你用不用，都会引入四套图标的文件，会对资源造成一定的浪费。我想告诉大家的是，现在这个插件升级了，在菜单选择的旁边有menu icons settings(menu icons插件设置)，完全可以去掉你不用的另外四种图标的加载文件，这样就不用浪费资源了，当然前提是你只选择了一套图标文件。
wordpress网站添加导航菜单图标方法
menu icons settings(menu icons插件设置)
menu icons插件主页：http://wordpress.org/plugins/menu-icons/

2.Menu Image插件

话说有时候给WordPress网站的导航菜单添加个小图标还是比较酷的一种效果，今天推荐的另一个插件就是 Menu Image。
Menu Image 功能很简单，启用插件后，就会在 主题 &gt; 菜单 下，可以在添加菜单的时候，为每个菜单项目设置一个小图标，然后前端菜单就会显示出来，如下图所示：
wordpress网站添加导航菜单图标方法
Menu Image插件导航菜单设置
在后台插件安装界面搜索 Menu Image 即可在线安装，或者下载 Menu Image。都说要使用好这个插件，需要具备一些基本的CSS知识，这样才能控制前端的显示效果，其实只要你具有一点审美观点就行了。

总之，Menu Icons和Menu Image都可以实现wordpress网站添加导航菜单图标，但是就我个人而言更喜欢Menu Icons，因为它本身就包含了Menu Image功能，而且不需要CSS知识，对我等小白站长非常适合，只要根据您个人的口味来设置wordpress网站添加导航菜单图标就ok了！当然，你有一定的CSS知识，那就更多一重选择了。

感谢您的来访，获取更多精彩文章请收藏本站。