<div data-theme-toc="true"> </div>
Ciao 
Questo argomento contiene due componenti tematici.
Discourse Easy SVG Icon CSS
Questo componente tematico è funzionale come modello, per favore creane un fork su Github o usa il codice per il tuo progetto. Puoi rimuovere i codici svg delle icone dal SCSS e mantenere solo quelli che usi effettivamente… Ho importato il file
mixinnel filecommon.scssin modo che tu possa aggiungere il tuo codice sotto quella riga o separatamente alla sezione desktop o mobile.
Il componente tematico aggiunge la capacità di mantenere le icone SVG in modo manutenibile e facilmente modificabile nel tuo CSS. Il componente contiene tutte le icone svg trovate qui: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
Come si usa?
Parametri fissi:
$icon-set: brands, regular, solid
$icon-name: nome dell’icona
$icon-color: colore dell’icona (currentColor, esadecimale o variabile di colore)
$width e $height: la dimensione dell’icona aggiunta
Sembra così:
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
Utilizzo di currentColor
Ecco un esempio per aggiungere un’icona a razzo solida prima dell’elemento di navigazione Latest.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
Utilizzo della variabile di colore var(--gold)
Ecco un esempio per aggiungere un’icona a stella regolare dorata prima dell’elemento di navigazione Top.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
Possiamo facilmente cambiare il set di icone, il colore o anche l’icona al passaggio del mouse, ecc… Vediamo!
Ora cambiamo l’icona regolare in solida quando passo il mouse sul pulsante.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:hover,
&:focus,
&.active {
&:before {
@include svg-icon(solid, star, currentColor, 1em, 1em);
}
}
&:before {
content: "";
@include svg-icon(regular, star, currentColor, 1em, 1em);
}
}
}
}
}
Discourse Easy Emoji CSS
mixinnel filecommon.scssin modo che tu possa aggiungere il tuo codice sotto quella riga o separatamente alla sezione desktop o mobile.
Come si usa?
L’utilizzo è simile alla versione SVG.
Parametri fissi:
$emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name: nome dell’emoji
$width e $height: la dimensione dell’emoji aggiunta
@include emoji($emoji-set, $emoji-name, $width, $height);
Ecco un esempio per aggiungere un’emoji rocket facebook_messenger prima dell’elemento di navigazione Latest e un’emoji star twitter prima dell’elemento di navigazione Top.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(facebook_messenger, rocket, 1em, 1em);
}
}
}
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(twitter, star, 1em, 1em);
}
}
}
}
}
Ha funzionato finalmente per te? C’è qualche caso d’uso specifico in cui vuoi usarlo? Se condividi alcuni dettagli, posso creare un componente a tema separato basato su questo, dove può essere facilmente modificabile con le impostazioni.
.
