本文作者:非李莫属

zblog博客怎么给导航加图标图文教程

非李莫属 8个月前 ( 07-31 ) 2061 26条评论
摘要: 最近一直在忙新主题模板的制作,因为刚刚做了一个洗发水的微商代理,效果很不错,所以打算制作一个小网站,推广优化一下,所以没怎么更新博客文章,有朋友反应想给导航加上图标,类似我现在这样...

最近一直在忙新主题模板的制作,因为刚刚做了一个洗发水的微商代理,效果很不错,所以打算制作一个小网站,推广优化一下,所以没怎么更新博客文章,有朋友反应想给导航加上图标,类似我现在这样,我的主题教程有简单的说明,但是小白还是不太会,今天抽空写个教程,手把手(这是重点)教你怎么给导航加上图标。

哦对了,还有一件事,我的博客访问?#23458;?#30772;1000000了,恩是?#27169;?#30334;万访问量,对于老司机来说也许很容易,但是对于我来说很不易啊,毕竟我不是专门写博客?#27169;?#24403;时建立博客的初衷就是为了记录下自己日常,后来慢慢的加入了zblog开发者,就需要实时更新一些主题或者一些教程,来回报支持我的老客户。说的跑题了,,,emmmm说正题,怎么给导航添加图标。

突破瓶颈.jpg

首先,博客启用的?#21069;?#26862;图标,不是图片,其实我也不知道这是什么插件,总之比图片好用就是了,我的博客都已经集成奥森图标的插件了,只需要到导航栏添加图标代码即可,登录网站后台,找到模块管理,导航栏,然后找到“正文”这里就是我们所能见到的导航栏的代码,说是代码其实就是简单的文本链接,修改如下。

blob.png

图片中的就?#21069;?#26862;图标的代码,直接添加在导航名前面就行了。如图;

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

然后就没有然后了,完成了,找到“禁止系统更新模块内容?#20445;?#28857;击提交,刷新首页就可以了。

blob.png

哦,你可能会问,为什么要选择禁止更新模块,是不是选择了,就不能更新了,答案是NO,案例说,选择禁止更新的话,下次更新分类内容的时候不应该有变化,但是事实不是这样,如果你修改了分类管理的分类内容,这里就会重新更新该分类下的链接和名字,所以之前更新的奥森图标就没有了,需要重新添加。说的有点乱是么,那我举个栗子:

假如你已经添加完图标了,但是换主题之后可能需要重新选择分类模板,然后你修改了对应的模板,提交,然后回到首页发现图标不见了。恩,是?#27169;?#19981;见了。所以还得重新添加以下。

栗子举完了,但是不能勾选还不行,不勾选的话,点击提交系统会自动删除刚刚新添加的图标代码,嗯嗯,就是这么有个性,至少目前是这样,不知道算不算BUG,如果你之前修改了没生效的话,试试勾选禁止更新模块,也许就好了。

教程就这样结束了,我就说嘛,很简单,简单到我非得重新啰?#20081;?#36941;,小白可能还要问,那代码去哪里找呢?怎么找啊?
好吧,点击下面的传送门,直接带你穿越过去;

传送门

打开链接,看到很多代码和图标,选择你?#19981;?#30340;图标,记录?#21592;?#30340;代码,

blob.png

还记得刚才的代码吧:

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

把其中的“fa-home”换成你?#19981;?#30340;代码“fa-address-book?#20445;?#23601;这样婶儿?#27169;?/p>

<i class="fa fa-address-book"></i>

然后添加就行了。我可以撤了。

PS:windows服务器可能需要添加“MIME类型”否则奥森图标的字体代码不能显示,具体怎么设置可以参考另外一篇博客:解决网站部署svg/woff/woff2字体404错误的方法

我又回来了,我知道你又有问题了,你说问我,你导航上面哪个“hot”怎么弄?#27169;?#25105;怎么没有?这段代码是我临时加上去?#27169;?#23601;是觉得有意思,既然你?#19981;?#37027;就顺便拿走吧。

跟之前的步骤一样,进去模块管理,导航栏,找到你想用角标的分类,代码如下:

<span id="hot">主题展示</span>

“主题展示”是分类名称,这里换成你自己的就行了,然后提交。
回到主题设置,外观设置,找到“自定义css?#27604;?#21518;开启,?#31243;?#22914;下代码:

span#hot {
    background-image:url(//www.918484.fun/zb_users/theme/talklee/style/images/hot.gif);
    background-repeat: no-repeat;
    background-position: right top;
    padding-top: 15px;
}

然后保存就可以了,其中图片链接可以化成自己的。

文章版权?#30333;?#36733;声明:

作者:非李莫属本文地址:http://www.918484.fun/blog/363.html发?#21152;?8个月前 ( 07-31 )
文章转载或复制请以超链?#26377;问?/a>并注明出处李洋个人博客

分享到:
赞(6

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论

快捷回复:

评论列表 (有 26 条评论,2061人围观)参与讨论
网友昵称:情感咨询
情感咨询游客2019-03-0413楼 回复
谢谢分享
网友昵称:非李莫属
非李莫属管理员2019-03-05 回复
@情感咨询 不客气,欢迎常来!
网友昵称:poorman
poorman游客2019-01-2812楼 回复
很实用的一个技能!
网友昵称:非李莫属
非李莫属管理员2019-03-05 回复
@poorman 嗯嗯是的呢
网友昵称:微信聊天记录查询网
微信聊天记录查询网游客2019-01-0711楼 回复
谢谢分享,不忘初?#27169;?label id="AjaxComment2364">
网友昵称:非李莫属
非李莫属管理员2019-01-08 回复
@微信聊天记录查询网 现在阿里图标好像更符合,有时间写个教程。
网友昵称:ijgames
ijgames游客2018-10-1710楼 回复
zblog的博客不错,
网友昵称:非李莫属
非李莫属管理员2018-10-18 回复
网友昵称:自?#25945;?#21338;客
自?#25945;?#21338;客游客2018-09-149楼 回复
非常好的一套技术啊啊!!!
网友昵称:非李莫属
非李莫属管理员2018-09-17 回复
@自?#25945;?#21338;客 还行,谢谢支持
网友昵称?#21644;?#21476;思
通古思游客2018-09-098楼 回复
请问,评论点击提交会后一直显示是Waiting,不知道是什么原因。
网友昵称:非李莫属
非李莫属管理员2018-09-10 回复
@通古思 我的博客么?我怎么没有遇到,方便的话加我QQ
网友昵称:游客
游客游客2018-09-087楼 回复
这套主图不错
网友昵称:非李莫属
非李莫属管理员2018-09-10 回复
@游客 谢谢支持!
网友昵称:风?#24418;?#35821;
风?#24418;?#35821;游客2018-09-066楼 回复
谢谢分享
网友昵称:非李莫属
非李莫属管理员2018-09-07 回复
@风?#24418;?#35821; ?#34892;?#25903;持!
网友昵称:518博客
518博客游客2018-08-26地板 回复
谢谢分享,不忘初?#27169;?label id="AjaxComment1974">
网友昵称:非李莫属
非李莫属管理员2018-08-27 回复
@518博客 能帮到你就好!