Installer Font Awesome dans HubSpot

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. Il existe deux façons d'utiliser Font Awesome dans HubSpot :

Utiliser le champ d'icône dans les modules personnalisés

Vous pouvez sélectionner des icônes Font Awesome pré-installées en ajoutant un champ d'icône à vos modules personnalisés. Pour ajouter un champ d'icône à un module personnalisé :

• Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
• Dans la barre latérale de gauche finder, sélectionnez un module personnalisé existant. Ou créez un nouveau module personnalisé.
• Ajoutez un champ d'icône au module en cliquant sur Ajouter un champ dans la barre latérale droite, puis en sélectionnant Icône.
  
  
• Vous pouvez également personnaliser le champ en définissant les valeurs par défaut et les options d'éditeur. En savoir plus sur la personnalisation des champs de module.
• Ajoutez le champ de l'icône au corps du module en déplaçant le champ dans la barre latérale droite, puis en cliquant sur Actions. Sélectionnez Copier le bloc de texte, puis collez le bloc de texte dans la section HTML + HUBL, où vous souhaitez que l'icône apparaisse.
  
  
• Dans l'angle supérieur droit, cliquez sur Publier.
• Si ce module est nouveau, ajoutez le module à tous les modèles où vous souhaitez utiliser les icônes. Cliquez sur Publier dans le coin supérieur droit pour publier les changements du modèle.
• Vous pouvez désormais sélectionner des icônes Font Awesome dans votre module personnalisé, à partir du gestionnaire de conception ou de l'éditeur de page.
  
  

Installer et utiliser Font Awesome manuellement

Pour installer Font Awesome dans HubSpot, vous devez être en mesure de modifier les feuilles de style sur votre site. Afin d'installer et d'utiliser une police Font Awesome manuellement dans HubSpot, vous devez tout d'abord charger Font Awesome dans votre gestionnaire de fichiers, puis mettre à jour vos éléments HTML pour utiliser les modules Font Awesome.

 Chargez Font Awesome dans votre gestionnaire de fichiers

• Téléchargez la version de Font Awesome que vous souhaitez utiliser dans HubSpot à partir du site http://fontawesome.io/ et décompressez le dossier sur votre ordinateur.
• Ouvrez le fichier font-awesome.css et copiez son contenu.
• Collez le contenu de ce fichier dans une feuille de style dans HubSpot.
• Ouvrez un nouvel onglet dans votre navigateur pour accéder à votre gestionnaire de fichiers. Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Fichiers.À cette étape, vous devez charger tous les fichiers de police Font Awesome indiqués dans la section Chemin de la police du fichier .css de Font Awesome.
• Une fois que vous avez chargé ces fichiers dans le gestionnaire de fichiers HubSpot, copiez les URL de chaque fichier et remplacez tous les liens relatifs contenus dans votre fichier .css par l'URL du gestionnaire de fichiers de chaque fichier correspondant. Votre code ressemblera à ceci, sauf que vous verrez les URL que vous avez copié à partir de votre gestionnaire de fichiers :

/* CHEMIN DE LA POLICE
 * -------------------------- */
@font-face {
 font-family: 'FontAwesome';
 src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?v=4.7.0');
 src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn2.hubspot.net/hubfs/HUBID/Font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

• Cliquez sur Publier les modifications dans la feuille de style lorsque toutes les URL relatives sont remplacées.

Utilisation de Font Awesome

Une fois que vous avez soit indiqué la version de Font Awesome hébergée par HubSpot, soit téléchargé des fichiers vers votre portail, vous pourrez désormais utiliser Font Awesome dans votre contenu. Font Awesome s'applique aux éléments qui contiennent class="fa", suivi d'une classe propre à l'icône que vous souhaitez afficher.

Par exemple :

class="fa fa-facebook"

Veuillez noter que les icônes Font Awesome ne fonctionnent pas dans les e-mails. De plus, veuillez noter que  les éléments ne peuvent pas être utilisés avec le code source des éditeurs HubSpot WYSIWYG. Lors de l'implémentation des icônes Font Awesome, il est préférable d'utiliser des balises comme indiqué dans l'exemple ci-dessous :

Exemples d'icônes Font Awesome

• Icône Twitter

• Icône de liste

• Icône de caméra

Icônes Font Awesome hébergées par HubSpot

Remarque : la version hébergée par HubSpot de Font Awesome n'est pas mise à jour. Si vous souhaitez utiliser les icônes les plus récentes, vous devez charger vos propres fichiers de police dans le gestionnaire de fichiers et remplacer la référence @font-face par leur src urls.