正文 首页建站学院 建站教程

宁静致远(Quietlee)主题自带Font Awesome图标添加修改教程

凭栏听雨

宁静致远(Quietlee)主题自带Font Awesome图标添加修改教程

本站一直使用老李<非你莫属>的zblog主题,里面大部分都集成了Font Awesome(奥森图标),使用奥森图标有很多优点,用图标代替图片,加载快,使用灵活。

有些大佬反馈说不知道怎么添加、修改这些图标,下面由听雨来做一个详细的说明。


下面以老李的2020主打主题宁静致远(Quietlee)来做演示说明。本站导航栏就是使用了奥森图标:


宁静致远(Quietlee)主题自带Font Awesome图标添加修改教程

下面我们来修改这些图标,打开网站后台--模块管理--导航栏 里面可以修改网站首页顶部导航栏图标的代码如下:

<li class="menu-item-has-children"> 
   <a href="/JiaoCheng/"><i class="fa fa-cog"></i>技术教程</a> 
   <ul class="dropdown-menu sub-menu"> 
    <li><a href="/qqjishu/"><i class="fa fa-qq"></i>QQ技术</a></li> 
    <li><a href="/jianzhan/"><i class="fa fa-user-secret"></i>建站学院</a></li> 
    </ul></li>

<i class="fa fa-cog"></i>这就是一个完整的图标字体代码,怎么修改呢?

打开这个网站https://www.thinkcmf.com里面有很多图标,每个图标都对应一个代码。

你想用哪个图标,复制对应的代码,然后替换掉“<i class="fa fa-cog"></i>”这个代码后面的“cog”即可。一定要注意只能替换这一段,前面一定要保留“fa fa-”,否则不会生效的。

宁静致远(Quietlee)主题自带Font Awesome图标添加修改教程

改好保存提交,前台刷新就可以看到效果了。

是不是很简单呢?当然啦,上面的二级导航栏代码你也可以复制到你的站点上,修改下链接地址即可。