最近网站分类整理了一下,想到jiikii.com这个网站给导航上的文字前面添加了小图标,看着还是比较好看的。所以就想到了给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>