zblogPHP导航栏菜单名称前的个性化图标设置方法

投稿   别彧博客  2017-07-18 07:32:29  109 人阅读  25 条评论

很多初次使用 zblog 模板的朋友都很纠结为什么主题里面显示导航栏名称前都有个性化图标,而下载的模板却不显示图标呢?下面别彧博客就来简单说下 zblogPHP 导航栏菜单名称前面的个性化图标的设置步骤(PS:所使用的主题集成有图标字体功能,或者安装了个性化图标插件才行,本文以 Blogs 主题为例说明):

 1、登录我们的 zblogPHP 站点后台 >> 模块管理 >> 导航栏,具体如下:

zblogPHP导航栏菜单名称前的个性化图标设置方法 ZBlog 第1张

2、在“导航栏”模块编辑界面中,类型选择 DIV,打开“禁止系统更新模块内容”的开关,然后在正文的导航菜单名称前添加个性化图标代码,如:

  1. <i class="fa-book fa"></i>&nbsp;

具体效果如下图所示:

图中红色线里面的就是图标设置的代码

关于图标代码后面的   是图标跟名称之间加一个空格,让其看起来更美观而已。设置好后显示的效果如下图所示:

zblogPHP导航栏菜单名称前的个性化图标设置方法 ZBlog 第3张

理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加 class 来添加即可。比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可:

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

而我们想要更多的图标,就需要到官方的图标库(http://fontawesome.io/icons/)里面去查找,找到合适的图标后,点击打开即可得到相应的标签 class 了。

这是我使用 zblog 后遇到的导航菜单图标问题的解决办法,希望可以帮助跟我一样遇到这样问题的朋友。

文章标签: ,   ,  
原文地址:http://new27.cn/20170717.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 别彧博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
NEXT已经是最新一篇了
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 心动
    心动 【秀才】 @回复

    过来看看。。

  2. 于闻观纸
    于闻观纸 【小白】 @回复

    这个教程很实用,可以去美化自己的博客了!

  3. 小萝博客
    小萝博客 【进士】 @回复

    似乎在一些主题有这样的教程

    • boke112导航
      boke112导航【村长】2017-07-18 22:35  回复

      @小萝博客这篇教程在zblogPHP方面算是比较详细的,很多zblogPHP博主站长们都不懂得添加这个图标,所以这个文章还是很不错的

  4. 别彧旅行博客
    别彧旅行博客 【小白】 @回复

    感谢博主 [呵呵]

  5. 我爱动感单车网
    我爱动感单车网 【尚书】 @回复

    几年没用zblog了,都不知道怎么使用它了。

  6. 用&眼睛微笑
    用&眼睛微笑 【小白】 @回复

    写的不错,很赞。

  7. IT客
    IT客 【秀才】 @回复

    不是有现成插件么

  8. BanYuner
    BanYuner 【进士】 @回复

    没事看看,虽然使用的是WordPress

  9. 安心财务
    安心财务 【举人】 @回复

    好久没来了

  10. 聚赚园
    聚赚园 【书童】 @回复

    科技就是前沿

  11. 玉满斋
    玉满斋 【尚书】 @回复

    呵呵,可惜都是科技类的图标,没有我们传统行业能用的图标!

  12. E书之家
    E书之家 【秀才】 @回复

    又见ZBPHP教程了 [赞]

  13. 闲鱼
    闲鱼 【进士】 @回复

    教程不错哈,哈哈哈

  14. 爱时尚
    爱时尚 【小白】 @回复

    这个技巧比较实用,感谢分享

  15. 靠谱学生兼职网
    靠谱学生兼职网 【状元】 @回复

    哦,这个我用得着哦,好技巧

  16. 电脑维修
    电脑维修 【状元】 @回复

    感谢分享不错的

  17. vultr vps
    vultr vps 【小白】 @回复

    感谢分享