当前位置:空木白博客 > Emlog > 正文

作者:空木白

手机扫码查看

添加网站手机底部导航 [FONT AWESOME图标版]

添加网站手机底部导航 [FONT AWESOME图标版]

代码引用:(放入主题footer.php文件中)

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="https://wuzuhua.cn/"> <span class="fa fa-home"></span> 首页 </a></li>
        <li> <a href="https://wuzuhua.cn/wy"> <span class="fa fa-twitch"></span> 微语 </a></li>
        <li> <a href="https://wuzuhua.cn/?s="> <span class="fa fa-search"></span> 搜索 </a></li>
        <li> <a href="https://wuzuhua.cn/lyb"> <span class="fa fa-comments"></span> 留言 </a></li>
        <li> <a href="https://wuzuhua.cn/disclaimer"> <span class="fa fa-info-circle"></span> 关于 </a></li>
    </ul>
</div>

CSS代码:(CSS代码放入主题模板的CSS文件)

@media screen and (min-width:767px){#mobile-footer{display:none}}
#mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999}
#mobile-menu{display:block}
#mobile-menu:after{content:'';display:block;height:0;clear:both}
#mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%}
#mobile-menu>li>a:hover{color:#000;}
#mobile-menu>li>.active{color:#000;}
#mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%}
#mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}

底部导航修改:

Font Awesome图标库修改所需图标/链接地址/名称即可!

 您阅读这篇文章共花了: 
未经允许不得转载:

作者:空木白, 转载或复制请以 超链接形式 并注明出处 空木白博客
原文地址:《添加网站手机底部导航 [FONT AWESOME图标版]》 发布于2019-04-30

分享到:
赞(2) 打赏

评论 抢沙发

评论前必须登录!

  注册



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

支付宝扫一扫打赏

微信扫一扫打赏

隐藏
变装
EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      切换注册

      登录

      忘记密码 ?

      您也可以使用第三方帐号快捷登录

      Q Q 登 录
      微 博 登 录
      切换登录

      注册