Questo componente include un’impostazione del tema che ti permette di aggiungere quanti link desideri, determinare le relative icone e decidere su quali dispositivi devono apparire!
Nome
Descrizione
header links
Elenco di link con le seguenti proprietà: titolo, icona, URL, visualizzazione e destinazione
add whitespace
Se selezionato, aggiungerà uno spazio bianco tra le icone predefinite dell’intestazione di Discourse e le icone personalizzate aggiunte tramite questo componente
Svg icons
Include le classi delle icone FontAwesome 6 per ciascuna icona utilizzata nell’elenco.
Le icone possono essere qualsiasi icona FontAwesome 6 (gratuita) senza le parti fa-, fab-, fas- o far-, oppure un URL a un’immagine.
Se l’icona che desideri utilizzare non viene visualizzata, aggiungila all’impostazione svg_icons nel componente. Se aggiungi nuove icone, devono essere prefissate con i prefissi di FontAwesome 6 come fab, far e fas.
Ho lo stesso problema segnalato da alcune persone sopra: l’icona non viene visualizzata, ma il pulsante è comunque cliccabile. Ho modificato l’impostazione dell’icona in modo che riporti, ad esempio, “fab-facebook-f” invece di semplicemente “facebook-f”. Per Twitter e il mio altro sito web non ho problemi, ma per Facebook e LinkedIn non funziona ancora.
Ho capito Facebook, ma non riesco ancora a gestire LinkedIn. Inoltre, c’è un modo per creare un’icona personalizzata? Potrei caricare il logo della mia azienda e usarlo come icona?
Quello screenshot delle impostazioni sembra riferirsi al componente Custom Header Links - #84, che serve per mostrare collegamenti testuali e non icone.
Capisco come i nomi dei componenti possano creare confusione:
https://github.com/discourse/discourse-header-links - collegamenti con icone (questo argomento)
Ah, questo ha risolto il problema, effettivamente. Sì, è davvero confuso. Rinominare sarebbe fantastico!
MODIFICA: L’aggiornamento recente ha anche cambiato di nascosto il nome della classe di Discord, inserendo “fab-” in mezzo (ad esempio, se vuoi cambiare il colore delle icone; cosa che @OP potrebbe trasformare in una funzione nativa eccellente - è stato un po’ difficile da notare).
ma poiché quell’icona non è inclusa nell’insieme predefinito di icone utilizzato da Discourse, dovrai anche aggiungerla all’altra impostazione nel componente.
Certo, c’è una sezione in questo argomento dedicata all’aggiunta di icone personalizzate.
Una volta configurato, potrai utilizzare qualsiasi icona personalizzata aggiungi in questo componente del tema. Dai un’occhiata lì e fammi sapere se incontri problemi.
Ho apportato questa modifica insieme ad alcuni altri miglioramenti nell’implementazione qui
Il nuovo aggiornamento aggiunge classi uniche con prefisso a ciascun link in base al titolo che utilizzi. Quindi, ad esempio, se usi
Grazie per il tuo aiuto. Ho provato a usare “fab-linkedin” sia nella categoria “Link nell’intestazione” che in “Icone SVG”. Come si vede nell’immagine, per qualche motivo non funziona ancora.
Visto che sei una nostra cliente, ho controllato il tuo sito e risolto il problema per te. Ho aggiornato il componente del tema e impostato le configurazioni corrette per le icone; ora dovrebbero funzionare tutte.
Un’ultima domanda/richiesta: inizialmente questi link si aprivano in una nuova scheda, ma ora si aprono nella stessa scheda. L’impostazione è già configurata su “blank”, come posso altrimenti modificare questo comportamento?
Infatti. Per errore ho omesso l’attributo target nelle modifiche recenti.
Non è necessaria alcuna azione da parte tua. Ho corretto il componente e aggiornato il tuo sito. Quindi tutto dovrebbe essere a posto ora. Grazie per aver segnalato il problema
Le icone personalizzate si trovano a destra dei pulsanti di accesso e registrazione, ma penso che starebbero meglio a sinistra, come è solitamente il caso.
Posso far funzionare alcune icone della versione 4.7.0 prelevate da Font Awesome Icons semplicemente digitando un nome (ad esempio car) nella sezione corretta di “Header links”. Alcune icone non vengono visualizzate (ad esempio fa-comments-o). Alcune non richiedono l’uso di “Svg icons” (ad esempio home), mentre altre sì (ad esempio car).
Nessuna delle icone della versione 5 che ho provato, reperibili su Find Icons with the Perfect Look & Feel | Font Awesome, ha funzionato. Ho inserito il nome con il prefisso fa- sia in “Header links” che in “Svg icons”, ma senza alcun effetto. Le icone fab-facebook (e simili), che erano presenti di default, funzionano invece.
Cosa sto sbagliando?
Modifica: ho corretto il primo paragrafo per maggiore precisione.
Grazie mille per questo, @Johani. Funziona alla perfezione e mi offre una soluzione “estetica” per il collegamento “torna al sito” (nel mio caso).
Tuttavia, ho riscontrato un problema poiché sto anche utilizzando il componente Menu hamburger a sinistra su mobile, che finisce per rompere tutto in quella parte dell’.d-header.
Anche io sto riscontrando un problema con la visualizzazione della mia icona. Non sono sicuro di cosa stia sbagliando. Ecco cosa ho nelle impostazioni:
Ospitato da noi? I componenti tema sono disponibili per l’uso sui nostri piani Standard, Business ed Enterprise.
