# 在欢迎链接横幅中使用 emoji 替代图标

**URL:** <https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588>\
**Category:** Development\
**Tags:** welcome-link-banner\
**Created:** [2022年三月19日 17:02 UTC](https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588 "2022-03-19T17:02:49Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2022年三月19日 23:37 UTC](https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588/2 "2022-03-19T23:37:37Z")

</div>

> [@mk0r](#):
>
> 问题：横幅颜色默认是否遵循主题颜色，例如论坛是否处于黑暗模式？

根据我的经验，是的：请参阅我在这里的截图：[Third migration, once again for a niche forum (Volkswagen Campers vans)](https://meta.discourse.org/t/third-migration-once-again-for-a-niche-forum-volkswagen-campers-vans/220224)

> [@mk0r](#):
>
> 我希望能用表情符号而不是 Font Awesome 图标

有点取巧……但你只能用 CSS 来实现：

```scss
.featured-todo div {
    h3 {
        background: no-repeat top center;
        background-size: 30px 30px; // emoji width and height
        padding-top: 45px; // emoji height + 15 px margin down
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/5/65ea6187de0a792545bc57189a37fcf21094de45.png)

> [@mk0r](#):
>
> 如果能将对齐方式从居中改为左对齐就好了

你指的是哪一部分？

---

_[View the full topic](https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588)._