Ce composant inclut un paramètre de thème qui vous permet d’ajouter autant de liens que vous le souhaitez, de déterminer leurs icônes et de choisir sur quels appareils ils s’affichent !
Nom
Description
liens d’en-tête
Liste de liens avec les propriétés suivantes : titre, icône, URL, vue et cible
ajouter un espace blanc
Si coché, cela ajoutera un espace blanc entre les icônes d’en-tête par défaut de Discourse et les icônes personnalisées ajoutées via ce composant
Icônes SVG
Inclure les classes d’icônes FontAwesome 6 pour chaque icône utilisée dans la liste.
Les icônes peuvent être n’importe quel nom d’icône FontAwesome 6 (gratuit) sans les parties fa-, fab-, fas- ou far-, ou une URL vers une image.
Si l’icône que vous souhaitez utiliser n’apparaît pas, ajoutez-la au paramètre svg_icons dans le composant. Si vous ajoutez de nouvelles icônes, elles doivent être préfixées par les préfixes FontAwesome 6 tels que fab, far et fas.
Je rencontre un problème similaire à celui mentionné par quelques personnes ci-dessus : l’icône ne s’affiche pas, mais je peux toujours cliquer sur le bouton. J’ai modifié le paramètre d’icône pour qu’il indique (par exemple) « fab-facebook-f » au lieu de simplement « facebook-f ». Pour Twitter et mon autre site web, je n’ai aucun problème, mais pour Facebook et LinkedIn, cela ne fonctionne toujours pas.
J’ai compris Facebook, mais je n’arrive toujours pas à maîtriser LinkedIn. Par ailleurs, existe-t-il un moyen de créer une icône personnalisée ? Puis-je télécharger le logo de mon entreprise et l’utiliser comme icône ?
Ah, cela a résolu le problème, en effet. Ouais, c’est super confus. Le renommage serait top !
MODIF : La dernière mise à jour a aussi semblé modifier discrètement le nom de classe de Discord pour y ajouter « fab- » au milieu (par exemple, si vous voulez changer la couleur des icônes ; ce que @OP pourrait facilement intégrer en tant que fonctionnalité native — c’était un peu difficile à repérer).
mais comme cette icône n’est pas incluse dans l’ensemble d’icônes par défaut utilisé par Discourse, vous devrez également l’ajouter à l’autre paramètre du composant.
Bien sûr, il y a une section dans ce sujet concernant l’ajout d’icônes personnalisées.
Une fois que vous aurez configuré cela, vous pourrez utiliser n’importe quelles icônes personnalisées que vous ajouterez dans ce composant de thème. Veuillez consulter cette section et faites-moi savoir si vous rencontrez des problèmes.
J’ai apporté cette modification ainsi que quelques autres améliorations d’implémentation ici
La nouvelle mise à jour ajoute des classes préfixées uniques à chaque lien en fonction du titre que vous utilisez. Ainsi, par exemple, si vous utilisez
Merci pour votre aide. J’ai essayé d’utiliser « fab-linkedin » dans les catégories « Liens d’en-tête » et « Icônes SVG ». Comme le montre l’image, cela ne fonctionne toujours pas pour une raison quelconque.
Étant donné que vous êtes cliente, je suis allé consulter votre site et j’ai résolu le problème pour vous. J’ai mis à jour le composant du thème et configuré les paramètres corrects pour les icônes ; elles devraient toutes fonctionner maintenant.
Une dernière question/demande : initialement, ces liens s’ouvraient dans un nouvel onglet, mais maintenant ils s’ouvrent dans le même onglet. Le paramètre est déjà défini sur “blank”, comment puis-je autrement modifier cela ?
En effet. J’ai oublié par erreur l’attribut target dans les modifications récentes.
Aucune action n’est nécessaire de votre part. J’ai corrigé le composant et mis à jour votre site. Tout devrait donc être en ordre maintenant. Merci d’avoir signalé le problème
Les icônes personnalisées se trouvent à droite des boutons de connexion et d’inscription, et je pense qu’elles seraient mieux placées à gauche, comme c’est généralement le cas.
Je peux faire fonctionner certaines icônes de la version 4.7.0 provenant de Font Awesome Icons simplement en tapant leur nom (par exemple, car) dans la section appropriée de « Liens d’en-tête ». Certaines icônes ne s’affichent pas (par exemple, fa-comments-o). Certaines ne nécessitent pas l’utilisation de « Icônes SVG » (par exemple, home), tandis que d’autres en ont besoin (par exemple, car).
Aucune des icônes de la version 5 que j’ai essayées depuis Find Icons with the Perfect Look & Feel | Font Awesome n’a fonctionné. J’ai saisi le nom commençant par fa- dans « Liens d’en-tête » et « Icônes SVG », mais sans résultat. En revanche, les icônes fab-facebook (etc.) qui étaient présentes par défaut fonctionnent.
Qu’est-ce que je fais de mal ?
Édition : J’ai modifié le premier paragraphe pour plus de précision.
Merci beaucoup pour cela @Johani. Ça fonctionne à merveille et me donne une solution « esthétique » pour lier « retour au site » (dans mon cas).
Cependant, j’ai rencontré un problème car j’utilise également le composant Menu hamburger latéral gauche sur mobile, ce qui finit par tout casser dans cette partie de .d-header.
Hébergé par nous ? Les composants de thème sont disponibles sur nos offres Standard, Business et Entreprise.
