Da testo a icona

[Radu]

Come posso sostituire il testo dallo screenshot con qualsiasi altra icona svg (qualsiasi) usando solo CSS?

Molto apprezzato!

[NateDhaliwal]

Dovrai prima caricare il tuo file SVG nella sezione Uploads. Per il nome della variabile SCSS, scegli qualcosa di breve e conciso.
Quindi, aggiungi questo frammento alla scheda Common:

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

Nota che non dovresti inserire virgolette all’interno delle parentesi dell’URL.

[Canapin (Coin-coin le Canapin)]

Don ha creato uno strumento di supporto per l’utilizzo delle icone in CSS:

Discourse Easy 'SVG Icon' and 'Emoji' in CSS

Hello This topic contain two theme component. Discourse Easy SVG Icon CSS This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the mixin file to the common.scss file so you can add your code below that line or separately to the desktop or mobile section. The theme component add the ability to keep the SVG…

[Radu]

Mi dispiace, non capisco. Cosa intendi con $name-of-variable? Sto cercando di aggiungere un codice SVG dopo content:, e non funziona.

[Radu]

Molto apprezzato @Canapin, ma non ho intenzione di installare altri componenti per cambiare la parola “replies” con un codice SVG.

[NateDhaliwal]

Il nome della variabile è quello che hai inserito quando hai caricato il file SVG.

Sarà necessario essere un Amministratore per farlo.

---

1. Vai su /admin nel forum.
2. Nella barra laterale, scegli Componenti nella sezione Personalizzazioni e creane uno nuovo.
3. Carica il file SVG nella sezione Caricamenti in fondo alla pagina del componente.
4. Scegli un nome per la variabile (nella finestra di dialogo di caricamento del file)
5. Usa il codice nel mio post:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

6. Sostituisci name-of-variable con il nome che hai scelto nel Passaggio 4. Mantieni il $ prima del nome della variabile.
7. Fatto!

[Radu]

Grazie mille, ora è molto chiaro.

Una domanda veloce: se ho, diciamo, 10 icone, devo caricarle una per una?

[NateDhaliwal]

Sì, credo di sì.

[NateDhaliwal]

@Radu Nel caso in cui la mia guida non funzioni, puoi seguire questa guida, dove credo che tu possa caricare solo 1 file per più icone:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Radu]

Questo è stato un ottimo post e mi ha aiutato a sostituire le icone predefinite. Ancora una cosa, se posso…

Nel seguente codice, come posso inserire un’icona FontAwesome all’interno di content?

th.topic-list-data.posts.num > span {
    visibility: hidden;
}

th.topic-list-data.posts.num > span:after {
    content:'un'icona FontAwesome qui';
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}

[NateDhaliwal]

Puoi scaricarlo come SVG e poi fare la stessa cosa. Altrimenti, dovrai creare un componente, che sarà più complesso.

[Radu]

Quindi non c’è modo di fare qualcosa del genere?

content:'fa d-icon d-icon-reply';

Se no, come sarebbe il codice per il seguente metodo? Ho solo bisogno di un esempio da cui iniziare, perché ho provato il CSS di base e non ha avuto alcun effetto.

@NateDhaliwal

Puoi scaricarlo come SVG e poi fare la stessa cosa.

Apprezzerei molto!

[NateDhaliwal]

@Radu

content:'fa d-icon d-icon-reply';

No, ma puoi usare lo stesso metodo che hai usato con i metodi precedenti. Caricalo, quindi aggiungilo come file SVG che hai seguito usando la guida;

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[NateDhaliwal]

@Radu

In caso contrario, come sarebbe il codice per il seguente metodo? Ho solo bisogno di un esempio da cui iniziare, perché ho provato il css di base e non ha alcun effetto.

Non sono troppo sicuro di dove vuoi posizionare l’icona. Potresti inviare uno screenshot?
Grazie.

[Radu]

Non importa dove, voglio solo inserire un’icona FA all’interno della riga content:'...'

Penso che userò FA come famiglia di font e Unicode all’interno del metodo content.

[NateDhaliwal]

Potresti fare così:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

Non sono sicuro al 100% se questo funzioni, ma sono abbastanza sicuro che funzioni.