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

[mk0r]

Question: Do the banner colors by default respect the theme colors e.g. if forum is in dark mode?

Also, two feature requests:

• It would be great to be able to change the alignment to be left-aligned instead of centered (although I imagine this is simple with css)
• I would love to be able to use emojis instead of font awesome icons

[Canapin (Coin-coin le Canapin)]

@mk0r

Question: Do the banner colors by default respect the theme colors e.g. if forum is in dark mode?

From my experience, yes: see my screenshots here: Third migration, once again for a niche forum (Volkswagen Campers vans)

@mk0r

I would love to be able to use emojis instead of font awesome icons

A bit hacky… But you can make it with CSS only:

.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");
    }
}

@mk0r

It would be great to be able to change the alignment to be left-aligned instead of centered

Which part are you talking about?

[mk0r]

Thank you for your help @Canapin

@Canapin

Which part are you talking about?

The three links and their icons, I would like the text and icons to be all left-aligned rather than center-aligned, on both desktop and mobile. I have basic knowledge of css/html and couldn’t figure out how to change it using developer tools.

[Canapin (Coin-coin le Canapin)]

With icons:

.featured-todo div h3 {
    display: flex;
    align-items: center;
    svg {
        margin: 0 10px 0 0 !important;
    }
}

With emojis:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // emoji width and height
        padding-left: 45px; // emoji width + 15 px margin left
        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");
    }
}

---

Note: I didn’t test any of these customizations on mobile.