Sì, scusa, avrei dovuto aggiornare il mio post. Ho capito che con Font Awesome dovevo aggiungerli alle impostazioni.
E recentemente ho imparato, come hai detto, che è necessario creare un file svg sprite da caricare in icons-sprites.
Sto ancora imparando molte cose nuove. Apprezzo molto il tuo aiuto nell’arricchire le mie conoscenze. Grazie
Le icone delle categorie sul nostro sito sono sempre state bellissime, fino a quando oggi non ho effettuato l’accesso. Sembra che non ci sia alcun padding tra l’icona e il titolo della categoria quando viene visualizzata. Qualcun altro sta riscontrando questo problema?
Ad esempio…
Anche io lo vedo, sono sicuro che Penar lo risolverà, ma per ora questo lo risolve
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
Grazie a entrambi, ora dovrebbe essere risolto.
È possibile utilizzare icone diverse da quelle di Font Awesome? Il mio forum è dedicato ai viaggi e ho bisogno di icone molto specifiche che non sono presenti lì. Possiamo usare, ad esempio, un file icona PNG regolare, come facciamo con le categorie? Grazie!
Puoi utilizzare icone personalizzate convertendole in SVG e aggiungendole al tuo tema tramite uno sprite SVG. Consulta la sezione “Crea un foglio di sprite SVG” di questa guida per sapere come aggiungere icone personalizzate al tuo sito, che potrai poi utilizzare in questo componente (e in tutto il tuo sito Discourse).
Funziona benissimo!
È possibile modificarlo in modo che l’icona appaia dopo il titolo della categoria?
Domanda extra: è possibile aggiungere un tooltip/testo alternativo?
(Sfondo: sto nascondendo l’icona del lucchetto e invece uso questo componente per aggiungere un’icona alle poche categorie pubbliche che ho. Vorrei che gli utenti avessero un modo per scoprire cosa rappresenta il simbolo.)
Sto avendo problemi nell’utilizzare le mie icone personalizzate. Non ho trovato nulla che mi indicasse se usare o meno un prefisso. Ecco cosa sto facendo.
Ecco l’SVG che sto utilizzando - https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
Come puoi vedere, non riesco a vedere affatto l’icona di Arch.
icons-sprite:
my-icon nel mio foglio di calcolo, scrivo questo:Risultato:
@Canapin Questo non funziona. Ecco il mio file sprite - File Sprite
L’ID immagine che sto provando - Qui
Ecco cosa sto facendo -
Sto facendo qualcosa di sbagliato?
Nella tua spritesheet, prova a sostituire:
<svg width="0" height="0" class="hidden">
con:
<svg xmlns="http://www.w3.org/2000/svg">
Inoltre, non c’è bisogno di aggiungere l’ID dell’icona nei campi delle impostazioni svg icons: tutte le tue icone personalizzate sono già disponibili nella spritesheet caricata.
Credo che l’impostazione svg icons serva a caricare icone Font Awesome aggiuntive, dato che Discourse ne carica solo un insieme definito e limitato di default.
@Canapin Grazie! Ha funzionato alla perfezione. Ho ancora una domanda: questo file sprite è esclusivo di un componente particolare o posso accedere alle icone tramite i loro ID ovunque?
Quando carichi un file in un tema già utilizzato o in un componente del tema, puoi utilizzarlo in qualsiasi altro contesto, quindi immagino che tu possa usare gli ID delle tue icone ovunque.
Ciao Penar, questo supporterà il nuovo plugin Font Awesome Pro? O c’è qualche modo per usarlo già che mi sto perdendo? Grazie!
Dovrebbe funzionare con il plugin Pro, sì. Vedi icone SVG non Pro solo per le categorie?
Sì, dopo aver rimosso il mio sprite vengono visualizzati solo quelli non Pro. Inoltre, quelli non Pro non rispettano l’impostazione fa_icon_style per le icone chiare, ecc.
Hmm, sul mio sito locale funziona bene.
Questo è l’icona dell’ingranaggio, con il plugin impostato sullo stile “Light”. Confrontala con lo stile normale qui sotto.
Ma forse non sto controllando la cosa giusta… fammi sapere se c’è un’icona specifica che non viene visualizzata correttamente per te.
Ecco un esempio con l’impostazione su light. Image Critiques ha l’icona comment-alt-edit e non viene visualizzata (che è un’icona pro), Image Showcase ha l’icona images che non è pro, ma sta mostrando la versione regolare, non light. Discussions sta mostrando la versione solida di comments, e Community sta mostrando la versione light di users come previsto.
Ho provato a cambiarne uno in cog, e funziona come previsto con la corretta versione light, c’è molta stranezza in corso qui!
Hai provato con far-comment-alt-edit?
Okay, ora ho capito: la chiave è avere far- nella lista delle icone di categoria, non in icone svg. Quindi per le icone light devo cambiarle tutte in fal- e non segue l’impostazione del sito per stile delle icone fa, corretto?
