最近有博主反应根据《Nana主题升级到1.01 如何正确使用个性化图标》的步骤为导航菜单添加个性图标会出现错位现象，具体如下所示：
刚开始我还真不太相信，因为我在几个站点都安装过Nana主题，都能够正常为导航菜单添加个性化图标，后来在爱尚街博主的信任下，直接用他的站点来测试，没想到添加方法是正确的，可是前台确实显示导航菜单和个性图标错位。
最后经查看两者导航菜单的源码发现，导航菜单中的个性图标输出的源码竟然不太一样，具体如下：
后来爱尚街博主才说，他使用的主机是WIN主机，而不是我们常用的Linux主机。不知道这个个性图标错位是不是跟WIN主机有关。后来求助度娘之后，换一种方式添加个性化图标，完美解决这个导航菜单个性图标错位问题。现将两种常用的添加个性化图标的方法分享给大家，如果第一种方式添加会错位，请使用第二种方法添加。
特别说明：以下两种方法以Nana主题为例说明，如果其他未集成个性化图标功能的主题，请自行安装插件解决，具体可见《为WordPress主题导航菜单添加个性图标字体》。
第一种方法：适用于Linux主机
1、如我们需要为导航菜单中的“本站首页”添加一个home的个性图标，那么就在官网上找到那个home图标，点击它后即可看到这个图标的class了，如下图所示的“fa fa-home”。
2、登录 WordPress 后台》外观》菜单，然后点击“本站首页”，在它的CSS类中输入刚才获得的那个class，如下图所示：
3、保存好菜单后，我们就可以在首页看到我们的导航菜单“本站首页”前面已经有一个home图标了，具体见本站导航菜单。
第二种方法：适用于WIN主机
1、同第一种方法的步骤1一样，如我们需要为导航菜单中的“本站首页”添加一个home的个性图标，那么就在官网上找到那个home图标，点击它后即可看到这个图标的class了，如下图所示的“fa fa-home”。
2、登录 WordPress 后台》外观》菜单，然后点击“本站首页”，在它的导航标签中的“本站首页”前面输入：
- <i class="fa fa-home"></i>
具体如下图所示：
3、保存好菜单后，我们就可以在首页看到我们的导航菜单“本站首页”前面已经有一个home图标了，而且也不会再出现错位了。
如果发现点开菜单没有 CSS 类栏位怎么办？
这是因为WordPress默认是不打开这个功能的，我们只需要点击菜单页面右上方的【显示选项】，勾上CSS类即可：
发表于2016-07-09 10:28 沙发
[微笑] 一直觉得多少是个遗憾，那就是目前雪儿使用的主题本身没有这个功能，而要自己DIY又得安装个插件，想想还是作罢吧。
@我爱动感单车网其实有个性图标感觉好看一下，安装插件其实也是可以的
@懿古今我还是较为喜欢目前自己网站的简洁样式，再说了使用了个性图标之后，导航里能够防止的分类就少了。
发表于2016-07-09 14:24 板凳
站长就是要折腾才行。。。
发表于2016-07-09 14:27 地板
对我就是这样弄的
发表于2016-07-09 14:50 4楼
是不是需要打个空格啊？
@Koolight是两种不同的添加方式，我们玩WordPress一般都是用Linux主机，所以很少会遇到这种WIN主机的问题
发表于2016-07-09 17:51 5楼
我直接添加,不行就不想折腾了
@野人摊影视分享Linux主机的话，一般都很容易，很少会出现这种错位问题
发表于2016-07-09 21:40 6楼
喵，好麻烦的WP。
发表于2016-07-09 22:13 7楼
嗯 不错的教程
发表于2016-07-09 23:44 8楼
今天下午突然兴趣来了，看了看 zblog和emlog,感觉这两个都比WordPress简单，最简单的感觉是zblog .
@热腾网[微笑] zblog以前用过几年，目前一直在使用wordpress，但真心感觉wp程序臃肿，速度远远不如zblog啊。兴许以后再建站的话，会用回zblog。
@热腾网其实zblog还是很轻量级的，如果不太折腾程序的话，zblog就足够我们使用了
发表于2016-07-10 21:33 9楼
错位一般是css错了！
发表于2016-07-19 11:45 10楼
哈哈看看还不错
发表于2016-07-25 00:02 11楼
我是debian 64位主机，照文章方法添加图标，也是出现这种错位，真是奇了怪了，目前没找到办法，下来再研究研究。
@辞峡烟斜文中两种添加方法都不成功？？？
@懿古今我的debian主机采用第二种方法，不错位。第一种方法直接错位。奇了怪了。烦请站长好好查查，问题出哪？
@辞峡烟斜能够实现效果就OK了，没有那么精力去查为什么