Zblog导航文字前面添加图标

释放双眼,带上耳机,听听看~!

最近网站分类整理了一下,想到jiikii.com这个网站给导航上的文字前面添加了小图标,看着还是比较好看的。所以就想到了给zblog博客也添加一套,所以就有了此篇文章内容。


鸡壳网站的效果

Zblog导航文字前面添加图标

这是根据鸡壳上修改的本站效果

Zblog导航文字前面添加图标

使用方法:

1、首先去Zblog应用商店搜索捷闪站长网上传的Font Awesome 图标 1.0插件,下载安装。

2、首先开启插件,这一步大家知道就不讲了。

3、然后打开Font Awesome 图标的中文网站:http://fontawesome.dashgame.com/  。

4、找到自己喜欢的图标,然后复制图标右边的名称,如 home 、bank 等!

5、这里以导航栏为例,我们将图表插入到首页导航的其中一个按钮。

6、打开模块编辑的导航栏编辑,对他进行编辑,在需要插入图标的其中一个按钮的名字前面加上<i class="fa fa-刚才复制的名字"></i>  ,也就是说,如果我要在下面这首页插入图标。

<li id="nvabar-item-index"><a href="http://www.zhulou.cc">首页</a></li> 

就变成了 

<li id="nvabar-item-index"><a href="http://www.zhulou.cc"><i class="fa fa-home"></i>首页</a></li> 

如果需要修改图标大小可以按照下面这样

<li id="nvabar-item-index"><a href="http://www.zhulou.cc"><i class="fa fa-home fa-lg"></i>首页</a></li>

使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x,或者 fa-5x 类 来放大图标。

<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

下面是本站完整的代码可供参考:

<li id="nvabar-item-index"><a href="https://www.zhulou.cc/"><i class="fa fa-home fa-lg"></i> 首  页</a></li>

<li id="navbar-item-regpage"><a href="https://www.zhulou.cc/category-5.html"><i class="fa fa-file-text fa-lg"></i>  随笔日记</a></li>
</a></li>

<li id="navbar-category-13"><a href="https://www.zhulou.cc/category-6.html"><i class="fa fa-openid fa-lg"></i>  分    享</a>
<ul class="sub-menu">        
<li id="navbar-category-13"><a href="https://www.zhulou.cc/category-2.html">建  筑</a></li>
<li id="navbar-category-14"><a href="https://www.zhulou.cc/category-14.html">股  票</a></li>
<li id="navbar-category-13"><a href="https://www.zhulou.cc/category-1.html">风  水</a></li>
<li id="navbar-category-18"><a href="https://www.zhulou.cc/category-12.html">娱  乐</a>
<li id="navbar-category-18"><a href="https://www.zhulou.cc/category-7.html">资  料</a></li>
<li id="navbar-category-18"><a href="https://www.zhulou.cc/category-15.html">听  书</a></li>
</li>
</ul></li>

<li id="navbar-category-13"><a href="https://www.zhulou.cc/category-8.html"><i class="fa fa-share-alt fa-lg"></i>  VPS评测</a>
<ul class="sub-menu">        
<li id="navbar-category-13"><a href="https://www.zhulou.cc/category-9.html">虚拟空间</a></li>
<li id="navbar-category-14"><a href="https://www.zhulou.cc/category-11.html">控制面板</a></li>
<li id="navbar-category-13"><a href="https://www.zhulou.cc/category-13.html">VPS 主机</a></li>
<li id="navbar-category-18"><a href="https://www.zhulou.cc/category-14.html">S S 相关</a>
</li>
</ul></li>
<li id="navbar-category-13"><a href="https://www.zhulou.cc/category-16.html"><i class="fa fa-cube fa-lg"></i>  资源分享</a>
<ul class="sub-menu">
<li id="navbar-category-23"><a href="https://www.zhulou.cc/category-3.html">软  件</a></li>
<li id="navbar-category-24"><a href="https://www.zhulou.cc/category-12.html">源  码</a></li>
<li id="navbar-category-25"><a href="https://www.zhulou.cc/category-17.html">模  板</a></li>
</li>
</ul></li>

<li id="navbar-item-regpage"><a href="https://www.kuufuu.com/"><i class="fa fa-shopping-cart fa-lg"></i>  源码商城</a></li>
<li id="navbar-page-2"><a href="https://www.zhulou.cc/140.html"><i class="fa fa-edge fa-lg"></i>  简单导航</a></li>
<li id="navbar-page-2"><a href="https://www.zhulou.cc/2.html"><i class="fa fa-list-alt fa-lg"></i>  留 言 本</a></li>
<li id="navbar-item-regpage"><a href="https://www.zhulou.cc/User/Register.html"><i class="fa fa-user fa-lg"></i>  会员注册</a></li>

给TA打赏
共{{data.count}}人
人已打赏
随笔日记

如何给自己的网上申请360浏览器九宫格LOGO

2020-11-9 3:33:40

随笔日记

国家安全生产特种作业资格证书查询系统【官方查询】

2020-11-9 3:34:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索