线报网 / EMLOG教程 / EMLOG博客给导航加自定义字体图标[美化导航新方法]

EMLOG博客给导航加自定义字体图标[美化导航新方法]

【摘要】 分享一个思源常用的给emlog加字体图标的方法起源,,几天前写一个律师模板在手机端有个导航,需要加字体图标如图进入正题 给导航加字体图标1.首先,先引入字体图标(如模板自带,请省略......

分享一个思源常用的给emlog加字体图标的方法

起源,,几天前写一个律师模板在手机端有个导航,需要加字体图标如图

lawyerthemejietu.jpg


进入正题 给导航加字体图标

1.首先,先引入字体图标(如模板自带,请省略)

本次用Font Awesome做演示(因为平时比较喜欢用)

安装:将以下代码粘贴到网页HTML代码的部分.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.打开模板文件,找到module.php文件

搜索blog_navi(),在里面找<?php echo $value['naviname']; ?>

3.在上面的代码前边添加以下代码

<?php if($value['naviname'] == "首页"):?><i class="fa fa-home"></i>
<?php elseif($value['naviname'] =="微语"):?><i class="fa  fa-coffee"></i>
<?php elseif($value['naviname'] =="相册"):?><i class="fa fa-camera"></i>
<?php elseif($value['naviname'] =="归档"):?><i class="fa  fa-th-list"></i>
<?php elseif($value['naviname'] =="关于思源"):?><i class="fa  fa-heart"></i>
<?php elseif($value['naviname'] =="留言" || $value['naviname'] =="留言板"):?><i class="fa fa-comments"></i>
<?php elseif($value['naviname'] =="读者排行" || $value['naviname'] =="读者墙"):?><i class="fa fa-window-maximize"></i>
<?php elseif($value['naviname'] =="投稿"):?><i class="fa fa-share-alt"></i>
<?php elseif($value['naviname'] =="登录"):?><i class="fa fa-cogs"></i>
<?php elseif($value['naviname'] =="手机版"):?><i class="fa fa-mobile"></i>
<?php else:?><i class="fa fa-book"></i>
<?php endif;?>

php等号的应用,是不是很好玩呢~

可以结合模板设置,后台自定义设置,由于时间关系思源就不一一解释了


再分享一个导航美化的代码,效果如图

b-box.jpg

题外话(截图为b-box模板

预览点我)

利用正则实现将导航 "首页" 替换为字体图标

重复1.2.步骤

将<?php echo $value['naviname']; ?>

替换为

<?php echo preg_replace("[首页]",'<i class="fa fa-home"></i>',$value['naviname']); ?>

大功告成,是不是很简单呢~

如果有问题,请留言反馈。

欢迎转载,转载请注明来源

本文地址:http://www.isiyuan.net/diynavi.html

版权声明:《 EMLOG博客给导航加自定义字体图标[美化导航新方法] 》为作者 思源哥哥原创文章,转载请注明原文地址!
免责声明:思源资源网提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件(y#isiyuan.net)与我们联系处理。
本文地址:https://www.isiyuan.net/emlogjc/diynavi.html
分享到:
打赏

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

支付宝扫一扫打赏

微信扫一扫打赏

评论 (0)