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 installer Font Awesome dans HubSpot, vous devez être en mesure de modifier les feuilles de style sur votre site.
- Copiez tout le code de ce fichier 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 feuille de calcul. 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;
}
- 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 :
<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
| adjust anchor archive arrows arrows-h arrows-v asterisk ban bar-chart-o barcode bars beer bell bell-o bolt book bookmark bookmark-o briefcase bug building-o bullhorn bullseye calendar calendar-o camera camera-retro caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up certificate check check-circle check-circle-o check-square check-square-o circle circle-o clock-o cloud cloud-download cloud-upload code code-fork coffee cog cogs comment comment-o comments comments-o compass credit-card crop crosshairs cutlery dashboard (alias) desktop dot-circle-o download edit (alias) ellipsis-h ellipsis-v envelope envelope-o eraser exchange exclamation exclamation-circle exclamation-triangle external-link external-link-square eye eye-slash female fighter-jet film |
filter |
quote-right random refresh reply reply-all retweet road rocket rss rss-square search search-minus search-plus share share-square share-square-o shield shopping-cart sign-in sign-out signal sitemap smile-o sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-down (alias) sort-numeric-asc sort-numeric-desc sort-up (alias) spinner square square-o star star-half star-half-empty (alias) star-half-full (alias) star-half-o star-o subscript suitcase sun-o superscript tablet tachometer tag tags tasks terminal thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o tint toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) trash-o trophy truck umbrella unlock unlock-alt unsorted (alias) upload user users video-camera |
volume-down volume-off volume-up warning (alias) wheelchair wrench check-square check-square-o circle circle-o dot-circle-o minus-square minus-square-o plus-square plus-square-o square square-o bitcoin (alias) btc cny (alias) dollar (alias) eur euro (alias) gbp inr jpy krw money rmb (alias) rouble (alias) rub ruble (alias) rupee (alias) try turkish-lira (alias) usd won (alias) yen (alias) angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up |
chevron-down chevron-left chevron-right chevron-up hand-o-down hand-o-left hand-o-right hand-o-up long-arrow-down long-arrow-left long-arrow-right long-arrow-up toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) arrows-alt backward compress eject expand fast-backward fast-forward forward pause play play-circle play-circle-o step-backward step-forward stop youtube-play adn android apple bitbucket bitbucket-square bitcoin (alias) btc css3 dribbble dropbox facebook-square flickr foursquare github github-alt github-square gittip google-plus google-plus-square html5 linkedin-square linux maxcdn pagelines pinterest-square renren skype stack-exchange stack-overflow trello tumblr tumblr-square twitter-square vimeo-square vk windows xing-square youtube youtube-play youtube-square |
Note : 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