WordPress网站导航的个性化栏目图标设置使用教程

前两篇我们陆续讲解了：

WordPress网站文章页中添加幻灯片功能的使用教程（带演示）

WordPress网站侧边栏添加幻灯片功能教程（纯代码版）

让我们的网站前端看起来更美观，更专业，更具有表现力。

本篇将主要讲解：WordPress网站导航的个性化栏目图标设置使用。也可以让我们的网站更具有美观性和专业性。

主讲重点内容如下：

个性化图标设置添加方法要根据自己的网站主机不同，用对应的方法，否则会出现导航菜单个性图标设置添加错位问题。所以根据我们网站所用的主机的不同，添加的方法主要有两种。

下面明月SEO给出两种经过测试验证的正确的设置使用方法如下：

一.设置方法 (Linux主机)

在wordpress后台--插件--安装 Font Awesome

1、如我们需要为导航菜单中的“首页”添加一个home的个性图标，那么就在官网上找到那个home图标，点击它后即可看到这个图标的class了，如下图所示的“fa fa-home”。

更多的个性化图标，需要到官方的图标库里面去查找
官方图标库地址：http://fontawesome.io/icons/

图标字体在线制作：https://icomoon.io/app/

2、登录 【WordPress后台】然后依次点击【外观】》【菜单】，然后选择菜单“首页”，在它的CSS类中输入刚才获得的那个class，如下图所示：

3、点击保存好菜单

至此，设置已经完成，刷新网站首页，我们就可以在首页看到我们的导航菜单“首页”前面已经有一个home图标了。

由于明月SEO网站栏目已经位置占满，就没有在添加个性图标，在此也就不在演示。

二.设置方法（WIN主机）

1、如我们需要为导航菜单中的“首页”添加一个home的个性图标，那么就在官网上找到那个home图标，点击它后即可看到这个图标的class了，如下图所示的“fa fa-home”。

2、登录 【WordPress后台】然后依次点击【外观】》【菜单】，然后选择菜单“首页”，在它的“导航标签”中的“首页”前面输入：  <i class="fa fa-home"></i> 具体如下图所示：

3、点击保存好菜单

至此，设置已经完成，刷新网站首页，我们就可以在首页看到我们的导航菜单“首页”前面已经有一个home个性图标了。

注意点：

1.如果发现点开菜单没有 CSS 类栏位怎么办？

这是因为WordPress默认是不打开这个功能的，我们只需要点击菜单页面右上方的【显示选项】，勾上CSS类即可

2.WordPress网站都可以直接添加吗？

以上方法只适用已经集成了图标功能的主题网站。如果是未集成个性化图标功能的主题，需要先集成此功能，自己二次开发，或者直接利用插件即可。

利用插件集成的具体方法：

【WP后台】—【插件】—【安装插件】页面搜索：Font Awesome 4 Menus，下载安装并启用，也可以直接在官网下载，然后上传安装或解压后通过FTP上传。