# 有没有办法在主页上创建带有图标的页脚？（仅限移动用户，且会覆盖主题）

**URL:** <https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541>\
**Category:** Development\
**Created:** [2023 年3 月 8 日 21:35 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541 "2023-03-08T21:35:52Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

作者： ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
发布日期： [2023 年3 月 9 日 10:10 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541/4 "2023-03-09T10:10:21Z")

</div>

如果您找不到诸如“页脚”、“粘性页脚”等确切的词语，您可能需要付费请人来做，或者自己动手。

* * *

如果您想自己尝试创建自定义页脚，这里有一个起点。  
在您的论坛中创建一个新的主题组件。在“编辑 CSS/HTML”中，📱 移动设备选项卡 → 主体，放入此 HTML 代码：

```html
<div id="footer-test">
    test footer
</div>

```

在 📱 移动设备选项卡 → CSS 中，放入此 SCSS 代码：

```css
#footer-test {
    position: sticky;
    bottom: 0;
    z-index: 2;
    height: 80px;
    background: red;
    text-align: center;
    body[class=""] & { // prevent the footer from being displayed during the splash screen
        display: none;
    }
}

```

结果：  
 ![chrome_fLvmktTnqY](https://global.discourse-cdn.com/meta/original/4X/f/1/0/f10a7c5978eb7562d57ecad8a76a1e62be98a97d.gif)

---

_[View the full topic](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541)._