# Emoji's gebruiken in plaats van iconen in de Welkom Link Banner
**URL:** https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588
**Category:** Development
**Tags:** welcome-link-banner
**Created:** [19 maart 2022 om 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:** 5
**Page:** 1
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [19 maart 2022 om 17:02 UTC](https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588/1 "2022-03-19T17:02:49Z")
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
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [19 maart 2022 om 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")
> [@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)](https://meta.discourse.org/t/third-migration-once-again-for-a-niche-forum-volkswagen-campers-vans/220224)
> [@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:
```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");
}
}
```
> [@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?
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [20 maart 2022 om 00:55 UTC](https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588/3 "2022-03-20T00:55:45Z")
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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [20 maart 2022 om 12:37 UTC](https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588/4 "2022-03-20T12:37:59Z")
With icons:
```scss
.featured-todo div h3 {
display: flex;
align-items: center;
svg {
margin: 0 10px 0 0 !important;
}
}
```
With emojis:
```scss
.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.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [5 juli 2023 om 05:58 UTC](https://meta.discourse.org/t/using-emojis-instead-of-icons-in-the-welcome-link-banner/270588/5 "2023-07-05T05:58:47Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.