Hi 你好,欢迎访问!登录
当前位置:首页 - 电脑知识 - 正文 君子好学,自强不息!

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

2018-08-07电脑知识听雨的我1495°c
A+ A-

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

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

1.png

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

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

具体效果如下图所示:

2.png

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

3.png

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

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

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

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


  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
zblogPHP导航栏菜单名称前的个性化图标设置方法

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
推荐阅读

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


头条
1楼  头条 @Ta
时间:2018-09-15 01:00:20

文章不错非常喜欢

丁春华博客
时间:2018-10-03 08:57:42

您好,博主!丁春华博客友链网址现已更换为:https://www.dchbk.com/,麻烦请更换下,谢谢。

听雨的我
时间:2018-10-07 15:03:06

@丁春华博客:已经更新,欢迎常来!

女装品牌
时间:2018-10-22 22:24:30

文章不错非常喜欢

新闻
4楼  新闻 @Ta
时间:2018-11-30 00:04:38

文章不错非常喜欢

头条
5楼  头条 @Ta
时间:2019-01-27 23:42:37

文章不错支持一下

华子春xys
时间:2019-02-12 15:19:40

华子春xys来学习,文章不错。通俗易懂。

丘八阅读网
时间:2019-03-19 19:06:34

文章不错,非常喜欢

你的灵兽看起来很好吃
时间:2019-04-02 23:04:28

虽然不知道说的是什么,但看起来好厉害的样子!

异界没有手机
时间:2019-05-09 15:02:08

写的很好,支持一下

新闻头条
10楼  新闻头条 @Ta
时间:2019-06-18 01:05:20

文章不错非常喜欢

  用户登录