Comment installer Font Awesome ?

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. Pour suivre les instructions ci-dessous, vous devez maîtriser la modification des fichiers .css sur votre site.

Suivez les étapes ci-dessous pour installer Font Awesome dans HubSpot :

Comment utiliser la version de Font Awesome hébergée par HubSpot

Veuillez noter que la version de Font Awesome hébergée par HubSpot n’est pas mise à jour. Pour accéder aux icônes plus récentes qui ne figurent pas sur cette liste, vous devez suivre ces instructions.

• Copiez tout le code de ce fichier font awesome hébergé par HubSpot (v4.1.0).
• Ouvrez le gestionnaire de conception. Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
• Ouvrez la feuille de style appliquée à votre contenu et collez le code copié à l’étape précédente. Si vous ne savez pas exactement quelle feuille de style vous devez mettre à jour, découvrez comment trouver la feuille de style d’un élément de contenu spécifique.
• Cliquez sur Publier les modifications pour mettre à jour votre fichier .css. Apprenez-en davantage sur l’utilisation de Font Awesome dans votre contenu ici.

Au lieu de copier le code Font Awesome hébergé par HubSpot dans le fichier .css, vous pourriez coller le même code dans le champ En-tête HTML du site dans les paramètres, ou dans la balise d’en-tête de la section HTML d’une page spécifique.

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;
}

• Publier les modifications dans votre fichier .css lorsque toutes les URL relatives sont remplacées, et vous pouvez commencer à utiliser Font Awesome.

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. Sachez également que les éléments ne peuvent pas être utilisés avec le code source des éditeurs WYSIWYG de HubSpot. Lors de l’implémentation des icônes Font Awesome, il est préférable d’utiliser les balises comme indiqué dans l’exemple ci-dessous :

<h2>Font Awesome Icons Example</h2>
<ul class="fa fa-ul">
<li><span class="fa fa-twitter"></span>Twitter Icon</li>
<li><span class="fa fa-list-ul"></span>List Icon</li>
<li><span class="fa fa-camera-retro fa-lg"></span>Camera Icon</li>
</ul>

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

Note : la version de Font Awesome hébergée par HubSpot 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.