|||
-|-|-|
| Résumé | Discourse FontAwesome Pro permet l’utilisation des icônes Font Awesome Pro dans Discourse avec une licence FontAwesome en utilisant le jeton du package NPM de votre compte.
| Lien vers le dépôt | \u003chttps://github.com/discourse/discourse-fontawesome-pro\u003e
| Guide d’installation | Comment installer des plugins dans Discourse
Configuration
Cela nécessite quelques étapes supplémentaires pour être activé par rapport à un plugin normal :
Tout d’abord, vous devrez configurer une variable d’environnement supplémentaire contenant votre clé de licence Font Awesome Pro : DISCOURSE_FONTAWESOME_AUTH_TOKEN
Le script d’installation doit également être appelé lors de l’initialisation, en tant que hook “after_code” supplémentaire. Cela télécharge et ajoute les SVG FontAwesome Pro lors de la compilation en utilisant votre jeton d’authentification. Il s’agit d’un bloc supplémentaire distinct du bloc de clonage du plugin.
Voici un exemple d’installation dans app.yml :
env:
DISCOURSE_FONTAWESOME_AUTH_TOKEN: 123456
hooks:
after_code:
- exec:
cd: $home/plugins
cmd:
- git clone https://github.com/discourse/discourse-fontawesome-pro.git
- exec:
cd: $home/plugins/discourse-fontawesome-pro
raise_on_fail: false
cmd:
- $home/plugins/discourse-fontawesome-pro/scripts/install.sh
Choix d’une famille de remplacement :
Dans les paramètres d’administration, vous pouvez remplacer la famille d’icônes Discourse par défaut :
Choix d’un style de remplacement :
Vous pouvez également remplacer le style d’icône par défaut :
Duotone
Pour prendre le contrôle total du support du duotone, vous devrez remplacer le CSS suivant (dans un thème, ou autrement) et le remplacer par votre propre schéma de couleurs :
svg {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
Pour colorer des icônes individuelles, référencez l’ID du SVG :
#fad-search .fa-secondary {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
\u003e:warning: Mise à jour du style Duotone
\u003e Si vous utilisez des sélecteurs basés sur des classes comme :
\u003e css \u003e.fa-secondary { color: red; } \u003e
\u003e Vous devrez mettre à jour votre style pour utiliser des propriétés personnalisées CSS à la place. Les remplacements de couleur basés sur des classes ne fonctionnent plus car ils ont été supprimés dans Font Awesome v7
Sous le capot, cela utilise le dépôt de FontAwesome pour installer les polices dans le dossier SVG du plugin, et permet à Discourse de récupérer les sprites à partir de là.
\u003e:discourse2: Hébergé par nous ? Ce plugin est disponible sur nos plans Enterprise.
