给网站底部添加上font-awesome快捷按钮

给网站底部添加上font-awesome快捷按钮

 这个引用的是 Font Awesome 图标,一般模板都有吧。如果你模板里没有引用,请手动加上。

html代码:

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="https://www.upmumu.com"> <span class="fa fa-home"></span> 首页 </a></li>
        <li> <a href="https://www.upmumu.com/t"> <span class="fa fa-twitch"></span> 微语 </a></li>
        <li> <a href="https://www.upmumu.com"> <span class="fa fa-search"></span> 搜索 </a></li>
        <li> <a href="https://www.upmumu.com/liuyan.html"> <span class="fa fa-comments"></span> 留言 </a></li>
        <li> <a href="https://www.upmumu.com/guanyu.html"> <span class="fa fa-info-circle"></span> 关于 </a></li>
    </ul>
</div>

 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}

使用方法

1、把html代码放入 footer.php
2、把css代码放入你模板的css文件里

3、修改一下html代码里的链接地址、图标和名称就行了

广告
© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏
分享
评论 共8条
    • UP木木
    • 币安链0
      把html代码放入 footer.一般模板都有吧。php
      3月22日回复
    • UP木木
    • 龙行0
      非常棒,好东西
      1月26日回复
    • UP木木
    • 按摩椅0
      为每一个家庭提供及时的智能健康服务,让每一个人都能拥有轻松舒适的健康生活
      12月24日回复
    • UP木木
    • 沙扬娜拉0
      EMLOG 用起来怎么样,最近在考虑~
      12月17日回复
      • UP木木
        森七作者0
        @沙扬娜拉:简单,轻便就是emlog的优点,可以到emlog的官网看看www.emlog.net
    • UP木木
    • 二哈0
      [blockquote]滴!学生卡!打卡时间:下午10:54:53,请上车的乘客系好安全带~[/blockquote]
      12月17日回复
    • UP木木
    • 雷姆MAX0
      @(高兴)二楼
      12月17日回复
    • UP木木
    • 森七作者0
      [blockquote]滴!学生卡!打卡时间:上午1:14:45,请上车的乘客系好安全带~[/blockquote]
      12月17日回复