Font Awesome est une police d'icônes vectorielles évolutives que vous pouvez personnaliser par taille, par couleur et en fonction de presque n'importe quel attribut modifiable via une feuille de style CSS. Suivez les étapes ci-dessous pour installer Font Awesome dans le COS :
- Copiez tout le code du fichier font-awesome hébergé par HubSpot. Assurez-vous de bien sélectionner tout le code.
- Collez ce code dans votre fichier CSS. Pour être plus précis, accédez à Contenu > Gestionnaire de conception, recherchez votre feuille de style, ouvrez-la, collez-y le code copié à l'étape 1, puis enregistrez-la.
- Publiez le fichier CSS.
Vous pouvez désormais utiliser Font Awesome ! Font Awesome s'applique aux éléments qui contiennent class="fa", suivi d'une classe propre à l'icône que vous souhaitez afficher (class="fa-facebook", par exemple). Veuillez noter que les icônes Font Awesome ne fonctionnent pas dans les e-mails.
Sachez également que les éléments ne peuvent pas être utilisés avec le code source de nos éditeurs WYSIWYG. Lorsque vous cherchez à implémenter des icônes Font Awesome, il est préférable d'utiliser des balises , comme l'illustre l'exemple ci-dessous :
Exemples d'icônes Font Awesome
- Icône Twitter
- Icône de liste
- Icône d'appareil-photo
Si vous utilisez le thème par défaut de HubSpot (Hubtheme), Font Awesome se trouve dans hubtheme-foundation.css. Vous pouvez utiliser les shortcodes décrits dans cet article pour afficher les icônes de police. Veuillez noter que les shortcodes sont uniquement disponibles dans Hubtheme (ils nécessitent un fichier Javascript spécial).
Alternative aux étapes 1 à 3
Au lieu de copier le code Font Awesome dans votre fichier CSS, vous pouvez ajouter la balise de lien suivant à la balise d'en-tête de la section HTML du modèle ou des paramètres de contenu :
http://designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css" rel="stylesheet">
Veuillez noter que la version de Font Awesome hébergée par HubSpot n'est pas mise à jour. Si vous souhaitez utiliser des icônes plus récentes et non répertoriées ici, chargez vos propres fichiers de police dans le gestionnaire de fichiers et remplacez la référence @font-face par leur URL src.