仿卢松松2018年模板菜单前加Font Awesome图标字体方法

老白 3个月前 185浏览 1评论
本文目录

前几天卢松松模板又进行了部分更新,时间充裕,索性就仿了下来。

说起这个模板,当时大改版的时候可是被不少用户骂的不行,丑的一笔,但架不住卢松松文章内容多,赚钱的小点子一堆,觉得不好看的模板,看着看着也都习惯了,最终被接受,还培养了不少模板粉!

PS:其实这个模板好看说不上,但足够实用,特别是卢松松来用,刚刚好做内容!

仿卢松松2018年模板菜单前加Font Awesome图标字体方法 zblog模板学习 第1张

这个模板整体没什么特别的,与其它zblogPHP主题并没有太大差异和难度,就是左菜单带上图标会好看很多,本文主要也是讲下如何在模板中加入图标:


首先,我仿这个模板,用的是“Font Awesome”家的图标字体,丰富、简单、好处多多!


使用方法:

举例:

搜索图标:仿卢松松2018年模板菜单前加Font Awesome图标字体方法 zblog模板学习 第2张

调用代码:<i class="fa fa-search"></i>

详细说明:上述代码中,红色的search是可以改变的,不同图标有不同的英文字母。如果把红色的search改为qq会发生什么呢?

<i class="fa fa-qq"></i>此时这段代码代表的图标是:仿卢松松2018年模板菜单前加Font Awesome图标字体方法 zblog模板学习 第3张<i class="fa fa-weixin"></i>此时这段代码代表的图标是:仿卢松松2018年模板菜单前加Font Awesome图标字体方法 zblog模板学习 第4张

简单吧!


那么对应关系哪里找呢? 当然是去 “Font Awesome”找了,国内网址 -> http://fontawesome.dashgame.com/

仿卢松松2018年模板菜单前加Font Awesome图标字体方法 zblog模板学习 第5张

看到了吗?内有大量图标,图标右侧对应的是需要改变的英文,需要使用图标,只需要改变<i class="fa fa-search"></i>中的红色字母部分。


以下只针对卢松松模板说明:

具体到仿的卢松松模板,菜单应该如何加图标呢?

第一步:

后台 - 主题配置 - 导航菜单中设置好菜单,先不要管图标的问题,先设置好菜单。

第二部:

前台菜单满意后,复制网页中的菜单代码,粘贴到 主题配置 - 导航菜单 - DIY导航菜单代码中,

然后只选择仿卢松松2018年模板菜单前加Font Awesome图标字体方法 zblog模板学习 第6张,保存,此时利用DIY代码一样可以实现菜单效果。

第三步:

为菜单加图标,比如DIY代码中,菜单为:<li><a href="#">天下美食</a></li>,如果要为天下美食前加入搜索图标,那么就应该是:

<li><a href="#"><i class="fa fa-search"></i>天下美食</a></li> 红色部分为添加的图标

如果在天下美食前加入qq图标,那就是:<li><a href="#"><i class="fa fa-qq"></i>天下美食</a></li>

保存!

第四步:完!


写完本篇才发现,以前竟然写过一篇类似的使用fw字体方法的文章,汗!


Font Awesome 图标字体库最简单教程 - 使用方法!




1条评论
展开