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

2017-10-31 / 0 评论 EMLOG教程 / 思源哥哥

本文共计 3963 字,感谢您的耐心浏览与评论.

分享一个思源常用的给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教程 PHP教程 PHP实例

转载:转载请注明原文链接 - EMLOG博客给导航加自定义字体图标[美化导航新方法]


0条回应:“EMLOG博客给导航加自定义字体图标[美化导航新方法]”


发表评论

{view_code_no}