Verwendung von Emojis anstelle von Symbolen im Willkommens-Link-Banner

Entwickler
1

Frage: Berücksichtigen die Bannerfarben standardmäßig die Theme-Farben, z. B. wenn das Forum im Dark Mode ist?

Außerdem zwei Feature-Wünsche:

  • Es wäre toll, die Ausrichtung von zentriert auf linksbündig ändern zu können (obwohl ich mir vorstelle, dass dies mit CSS einfach ist)
  • Ich würde gerne Emojis anstelle von Font Awesome-Icons verwenden können
2 „Gefällt mir“
2

Aus meiner Erfahrung ja: siehe meine Screenshots hier: Third migration, once again for a niche forum (Volkswagen Campers vans)

Ein bisschen hacky… Aber man kann es nur mit CSS machen:

.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
image1088×300 21.5 KB

Worüber sprichst du?

4 „Gefällt mir“
3

Vielen Dank für deine Hilfe @Canapin

Die drei Links und ihre Icons, ich hätte gerne, dass der Text und die Icons linksbündig und nicht zentriert ausgerichtet sind, sowohl auf dem Desktop als auch auf dem Mobilgerät. Ich habe Grundkenntnisse in CSS/HTML und konnte nicht herausfinden, wie ich es mit den Entwicklertools ändern kann.

1 „Gefällt mir“
4

Mit Icons:

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

image
image1304×356 21.1 KB

Mit Emojis:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // Emoji-Breite und -Höhe
        padding-left: 45px; // Emoji-Breite + 15px linker Rand
        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
image1293×368 24.6 KB

Hinweis: Ich habe keine dieser Anpassungen auf Mobilgeräten getestet.

4 „Gefällt mir“
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.