Oui, désolé, j’aurais dû mettre à jour mon message. J’ai compris qu’avec Font Awesome, il fallait les ajouter à la configuration.
Et comme vous l’avez dit, j’ai récemment appris qu’il faut créer un fichier sprite SVG à télécharger dans icons-sprites.
J’apprends encore beaucoup de nouvelles choses. Je vous remercie pour votre aide dans l’évolution de mes connaissances. Merci.
Les icônes de catégorie sur notre site avaient fière allure, jusqu’à ce que je me connecte aujourd’hui. Il semble que l’espacement entre l’icône et le titre de la catégorie ait disparu à l’affichage. Quelqu’un d’autre rencontre-t-il ce problème ?
Par exemple…
Je vois la même chose. Je suis sûr que Penar le corrigera, mais pour l’instant, cela devrait régler le problème.
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
Merci à vous deux, cela devrait être corrigé maintenant.
Est-il possible d’utiliser d’autres icônes que celles de Font Awesome ? Mon forum est dédié aux voyages et j’ai besoin d’icônes très spécifiques qui n’existent pas dans cette bibliothèque. Peut-on utiliser un fichier image PNG standard, par exemple, comme nous le faisons pour les catégories ? Merci !
Vous pouvez utiliser des icônes personnalisées si vous les convertissez en SVG et les ajoutez à votre thème via un sprite SVG. Consultez la section « Créer une image de sprites SVG » de ce guide pour savoir comment ajouter des icônes personnalisées à votre site, que vous pourrez ensuite utiliser dans ce composant (et sur l’ensemble de votre site Discourse).
Ça fonctionne très bien !
Est-il possible de le modifier pour que l’icône apparaisse après le titre de la catégorie ?
Question bonus : est-il possible d’ajouter un infobulle ou un texte alternatif ?
(Contexte : je cache l’icône du cadenas et j’utilise plutôt ce composant pour ajouter une icône aux quelques catégories publiques que j’ai. J’aimerais que les utilisateurs puissent savoir ce que le symbole représente.)
J’ai des difficultés à utiliser mes icônes personnalisées. Je n’ai trouvé aucune information indiquant s’il faut utiliser un préfixe ou non. Voici ce que je fais.
Voici le SVG que j’utilise : https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
Comme vous pouvez le constater, je ne vois pas du tout l’icône d’Arch.
icons-sprite :
my-icon dans ma spritesheet, j’écris ceci :Résultat :
@Canapin Cela ne fonctionne pas. Voici mon fichier sprite - Fichier Sprite
L’ID d’image que j’essaie - Ici
Voici ce que je fais -
Est-ce que je fais quelque chose de mal ?
Dans votre spritesheet, essayez de remplacer :
<svg width="0" height="0" class="hidden">
par :
<svg xmlns="http://www.w3.org/2000/svg">
De plus, il n’est pas nécessaire d’ajouter l’ID de l’icône dans les champs du paramètre icônes SVG. Toutes vos icônes personnalisées sont déjà disponibles à partir de votre spritesheet téléchargé.
Je pense que le paramètre icônes SVG est destiné à charger des icônes Font Awesome supplémentaires, car Discourse ne charge par défaut qu’un ensemble défini et limité.
@Canapin Merci ! Ça a fonctionné du premier coup. J’ai une autre question, cependant : ce fichier sprite est-il réservé à un composant particulier, ou puis-je accéder aux icônes par leurs identifiants partout ?
Lorsque vous téléchargez un fichier vers un thème utilisé ou un composant de thème, vous pouvez l’utiliser dans tout autre contexte, donc je suppose que vous pouvez utiliser vos identifiants d’icône n’importe où.
Salut Penar, cela prendra-t-il en charge le nouveau plugin Font Awesome Pro ? Ou existe-t-il un moyen de l’utiliser déjà que j’aurais manqué ? Merci !
Cela devrait fonctionner avec le plugin Pro, oui. Voyez-vous des SVG non Pro uniquement pour les icônes de catégories ?
Oui, après avoir supprimé mon sprite, seuls les éléments non-pro s’affichent. De plus, les éléments non-pro ne respectent pas le paramètre fa_icon_style pour les icônes claires, etc.
Hmm, cela fonctionne bien sur mon site local.
Voici l’icône d’engrenage, avec le plugin utilisant le style « Light » sélectionné. Comparez cela au style standard ci-dessous.
Mais peut-être que je ne vérifie pas le bon élément… faites-moi savoir s’il y a une icône spécifique qui ne s’affiche pas correctement pour vous.
Voici un exemple où le paramètre est défini sur « light ». Critiques d’images utilise l’icône comment-alt-edit et ne s’affiche pas (c’est une icône Pro), tandis que Présentation d’images utilise l’icône images, qui n’est pas Pro, mais affiche la version standard au lieu de la version light. Discussions affiche la version pleine de comments, et Communauté affiche la version light de users comme prévu.
J’ai essayé de modifier l’une d’elles en cog, et cela fonctionne comme attendu avec la version light appropriée. Il se passe beaucoup de choses étranges ici !
Avez-vous essayé avec far-comment-alt-edit ?
D’accord, j’ai compris maintenant : la clé est d’avoir far- dans la liste des icônes de catégorie, et non dans icônes SVG. Donc pour les icônes claires, je dois toutes les remplacer par fal-, et cela ne suit pas le paramètre du site pour style d'icône fa, c’est bien ça ?
