Hinzufügen von Icons statt Text

Beitragen UX
1

Dieses Plugin ist fantastisch – ich bin nicht so bewandert bei Plugins, weiß also nicht, wie ich selbst davon abzweigen könnte, aber ich finde, Discourse hat ein schönes „Einfachheit"-Gefühl – es wäre toll, wenn Bilder/Icons unterstützt würden.

Hier ist eine etwas umständliche Methode, wie ich ein Discord-Icon umgesetzt habe:

image
image281×100 5.1 KB

(Abzüglich der Farbsättigung – HDR-Screenshot-Fehler sind das Schlimmste)

image

Nach der Installation erstelle eine neue CSS-Komponente oder bearbeite das Theme direkt:

Hier ist, was ich verwendet habe –

.headerLink
{
    color: white;
    
    &.d
    {
        background-image: url('https://i.imgur.com/MSef433.png');
        background-repeat: no-repeat;
        background-size: 22px;
        
        a
        {
            color: rgba(0, 0, 0, 0);
            text-decoration: none;
            &:hover
            {
                box-shadow: 0px 2px lightgray;
            }
        }
    }
}
  • Ich hatte Probleme mit Hover-Effekten, daher ist ein unterer Box-Schatten beim Hover das Beste, was ich hinbekommen habe, da es sich um Bilder und nicht um Unicode handelt:

image

  • Ich habe das obige Beispiel d genannt, weil man es irgendwie benennen muss. Ich setze die Schrift auf 0-Deckkraft, damit sie ausgeblendet wird, aber d ermöglicht es mir, die d-Klasse zu nutzen.

  • Gibt es eine Möglichkeit, das anders zu machen? Wahrscheinlich. Aber dies ist die umständliche Methode, um Ideen einzubringen, bis etwas Besseres auftaucht :slight_smile:

2 „Gefällt mir“
2

Zunächst einmal ist dies eine Theme-Komponente und kein Plugin. Es wäre besser, dies zu klären, bevor Benutzer verwirrt werden und versuchen, es wie ein Plugin zu installieren.

Die zweite Frage ist: Warum verwendest du diese Theme-Komponente statt Custom Header Links (icons), das genau dafür gedacht ist, Symbole zum Menü hinzuzufügen? :open_mouth:

6 „Gefällt mir“
3

Na klar, genau deshalb habe ich keine Komponente erstellt – ich lerne die Begriffe noch.

Weil es wohl nicht „cool" genug ist, um in dieser Liste der „lazy-link-install"-Komponenten aufzutauchen, nehme ich an ;D Wenn die Textlinks dort sein sollen, möchte ich auch, dass die Symbole dort sind! Es sieht wirklich großartig aus. Ich werde es mir jetzt gleich ansehen.

EDIT: Funktioniert wunderbar.

3 „Gefällt mir“