WordPress导航菜单添加个性图标错位的解决办法

原创 懿古今  2016-07-09  阅读 852 次

最近有博主反应根据《Nana主题升级到1.01 如何正确使用个性化图标》的步骤为导航菜单添加个性图标会出现错位现象,具体如下所示:

WordPress导航菜单添加个性图标错位的解决办法

刚开始我还真不太相信,因为我在几个站点都安装过Nana主题,都能够正常为导航菜单添加个性化图标,后来在爱尚街博主的信任下,直接用他的站点来测试,没想到添加方法是正确的,可是前台确实显示导航菜单和个性图标错位。

最后经查看两者导航菜单的源码发现,导航菜单中的个性图标输出的源码竟然不太一样,具体如下:

WordPress导航菜单添加个性图标错位的解决办法 第2张

WordPress导航菜单添加个性图标错位的解决办法 第3张

后来爱尚街博主才说,他使用的主机是WIN主机,而不是我们常用的Linux主机。不知道这个个性图标错位是不是跟WIN主机有关。后来求助度娘之后,换一种方式添加个性化图标,完美解决这个导航菜单个性图标错位问题。现将两种常用的添加个性化图标的方法分享给大家,如果第一种方式添加会错位,请使用第二种方法添加。

特别说明:以下两种方法以Nana主题为例说明,如果其他未集成个性化图标功能的主题,请自行安装插件解决,具体可见《为WordPress主题导航菜单添加个性图标字体》。

第一种方法:适用于Linux主机

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

WordPress导航菜单添加个性图标错位的解决办法 第4张

2、登录 WordPress 后台》外观》菜单,然后点击“本站首页”,在它的CSS类中输入刚才获得的那个class,如下图所示:

WordPress导航菜单添加个性图标错位的解决办法 第5张

3、保存好菜单后,我们就可以在首页看到我们的导航菜单“本站首页”前面已经有一个home图标了,具体见本站导航菜单。

第二种方法:适用于WIN主机

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

WordPress导航菜单添加个性图标错位的解决办法 第6张

2、登录 WordPress 后台》外观》菜单,然后点击“本站首页”,在它的导航标签中的“本站首页”前面输入:

  1. <i class="fa fa-home"></i>

具体如下图所示:

WordPress导航菜单添加个性图标错位的解决办法 第7张

3、保存好菜单后,我们就可以在首页看到我们的导航菜单“本站首页”前面已经有一个home图标了,而且也不会再出现错位了。

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

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

WordPress导航菜单添加个性图标错位的解决办法 第8张

本文地址:http://yigujin.cn/832.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!
WordPress免费清新BLOG/CMS响应式主题Nana专题文章
WordPress免费响应式主题:Nana

发表评论


表情

  1. 辞峡烟斜
    辞峡烟斜 【队长】 @回复

    我是debian 64位主机,照文章方法添加图标,也是出现这种错位,真是奇了怪了,目前没找到办法,下来再研究研究。

    • 懿古今
      懿古今【站长】 @回复

      @辞峡烟斜 文中两种添加方法都不成功???

      • 辞峡烟斜
        辞峡烟斜 【队长】 @回复

        @懿古今 我的debian主机采用第二种方法,不错位。第一种方法直接错位。奇了怪了。烦请站长好好查查,问题出哪?

        • 懿古今
          懿古今【站长】

          @辞峡烟斜 能够实现效果就OK了,没有那么精力去查为什么

  2. 森云
    森云 【村长】 @回复

    哈哈看看还不错

  3. 小C博客
    小C博客 【镇长】 @回复

    错位一般是css错了!

  4. 热腾网
    热腾网 【县长】 @回复

    今天下午突然兴趣来了,看了看 zblog和emlog,感觉这两个都比WordPress简单,最简单的感觉是zblog .

    • 我爱动感单车网
      我爱动感单车网 【市长】 @回复

      @热腾网 [微笑] zblog以前用过几年,目前一直在使用wordpress,但真心感觉wp程序臃肿,速度远远不如zblog啊。兴许以后再建站的话,会用回zblog。

    • 懿古今
      懿古今【站长】 @回复

      @热腾网 其实zblog还是很轻量级的,如果不太折腾程序的话,zblog就足够我们使用了

  5. 好书推荐排行榜
    好书推荐排行榜 【省长】 @回复

    嗯 不错的教程

  6. 姜辰
    姜辰 【县长】 @回复

    喵,好麻烦的WP。

  7. 野人摊影视分享
    野人摊影视分享 【村长】 @回复

    我直接添加,不行就不想折腾了

  8. Koolight
    Koolight 【市长】 @回复

    是不是需要打个空格啊?

    • 懿古今
      懿古今【站长】 @回复

      @Koolight 是两种不同的添加方式,我们玩WordPress一般都是用Linux主机,所以很少会遇到这种WIN主机的问题

  9. 龙凯的博客
    龙凯的博客 【队长】 @回复

    对我就是这样弄的

  10. 李阳博客
    李阳博客 【队长】 @回复

    站长就是要折腾才行。。。

  11. 我爱动感单车网
    我爱动感单车网 【市长】 @回复

    [微笑] 一直觉得多少是个遗憾,那就是目前雪儿使用的主题本身没有这个功能,而要自己DIY又得安装个插件,想想还是作罢吧。

    • 懿古今
      懿古今【站长】 @回复

      @我爱动感单车网 其实有个性图标感觉好看一下,安装插件其实也是可以的

      • 我爱动感单车网
        我爱动感单车网 【市长】 @回复

        @懿古今 我还是较为喜欢目前自己网站的简洁样式,再说了使用了个性图标之后,导航里能够防止的分类就少了。