Aggiungere icone anziché testo

Contribuisci UX
1

Questo plugin è incredibile — non sono esperto di plugin, quindi non so come crearne uno derivato da questo, ma sento che Discourse abbia un bel senso di “semplicità” — sarebbe fantastico supportare immagini/icon.

Ecco un metodo un po’ “artigianale” con cui ho realizzato un’icona di Discord:

image
image281×100 5.1 KB

(Tranne la saturazione del colore — i bug degli screenshot HDR sono i peggiori)

image

Dopo l’installazione, crea un nuovo componente CSS o modifica direttamente il tema:

Ecco cosa ho usato:

.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;
            }
        }
    }
}
  • Ho avuto problemi con gli effetti hover, quindi un’ombra inferiore all’hover è la soluzione migliore che ho trovato, dato che si tratta di immagini e non di caratteri Unicode:

image

  • Ho chiamato l’esempio sopra d perché devi dare un nome qualcosa. Ho impostato l’opacità del font a 0, così viene nascosto, ma d mi permette di sfruttare la classe d.

  • Esiste un modo per farlo? Probabilmente. Ma questo è il metodo “artigianale” per portare avanti le idee finché non si presenta qualcosa di meglio :slight_smile:

2 Mi Piace
2

Prima di tutto, questo è un componente del tema, non un plugin. È meglio specificarlo prima che gli utenti si confondano e cerchino di installarlo come un plugin.

La seconda cosa è: perché usi questo componente del tema invece di Custom Header Links (icons), che serve proprio a aggiungere icone al menu? :open_mouth:

6 Mi Piace
3

Dai, è proprio per questo che non ho creato un componente — sto ancora imparando la terminologia.

Perché, suppongo, non sia abbastanza figo da apparire in quell’elenco di componenti “installa-con-un-colpo-di-coda”; se i link testuali devono esserci, vorrei che ci fossero anche le icone! È davvero fantastico da vedere. Lo controllerò subito.

AGGIORNAMENTO: Funziona alla perfezione.

3 Mi Piace