Z-Blog导航栏,菜单栏如何设置个性化图标

原创 社长  2019-07-03 11:13:39  阅读 297 次 评论 3 条
重庆专业seo
摘要:

许多第一次应用 zblog 模版的盆友都很担心为何主题风格里边显示信息导航条名字前常有人性化标志,而免费下载的模版却无法显示标志呢?下边别彧搏客就来简易说下 zblogPHP 导航条菜单名称前边的人性化标志的设定流程(Ps:所应用的主题风格集成化有图标字体作用,或是装上人性化标志软件才行,文中以 Blogs 主题风格为例表明):1、登录我们的 zblogPHP 站点后台 >> 模块管理 >> 导航栏,具体如下:2、在“导航栏”模块编辑界面中,类型选择 DIV,打开“禁止系

许多第一次应用 zblog 模版的盆友都很担心为何主题风格里边显示信息导航条名字前常有人性化标志,而免费下载的模版却无法显示标志呢?下边别彧搏客就来简易说下 zblogPHP 导航条菜单名称前边的人性化标志的设定流程(Ps:所应用的主题风格集成化有图标字体作用,或是装上人性化标志软件才行,文中以 Blogs 主题风格为例表明):

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

Z-Blog导航栏,菜单栏如何设置个性化图标

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

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

具体效果如下图所示:

Z-Blog导航栏,菜单栏如何设置个性化图标

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

Z-Blog导航栏,菜单栏如何设置个性化图标

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

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

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

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

本文地址:http://dxf6.com/post/175.html
版权声明:本文为原创文章,版权归 社长 所有,欢迎分享本文,转载请保留出处!
重庆专业seo
数据湾

发表评论


表情

评论列表

  1. 辣妈墨兮
    辣妈墨兮 【】  @回复

    来看看呀

  2. 何以往事
    何以往事 【】  @回复

    我还是过来看

  3. 墨兮资源网
    墨兮资源网 【】  @回复

    感谢大佬分享