腾讯云服务器优惠活动华纳云香港服务器
boke112百科 » Z-Blog » 正文

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

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

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

zblogPHP导航栏菜单名称前的个性化图标设置方法-第1张-boke112百科(boke112.com)

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

  1. <i class=“fas fa-book”></i>&nbsp;

具体效果如下图所示:

zblogPHP导航栏菜单名称前的个性化图标设置方法-第2张-boke112百科(boke112.com)

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

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

zblogPHP导航栏菜单名称前的个性化图标设置方法-第3张-boke112百科(boke112.com)

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

  1. <i class=“fab fa-weixin”></i>

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

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

赞 (0) 打赏
版权声明:本文为转载文章,来源于 别彧博客 ,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
wu