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. Les deux méthodes les plus courantes d'utilisation de Font Awesome dans HubSpot sont les suivantes :
- Utilisation du champ d'icône dans les modules personnalisés
- Utilisation d'un kit Font Awesome
Remarque : les icônes Font Awesome ne fonctionnent pas dans les e-mails car la majorité des clients de messagerie ne prennent pas en charge les polices web. Pour utiliser des icônes dans un e-mail, vous devez convertir ces icônes en images, puis insérer les images dans l'éditeur d'e-mails.
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.
Utilisation d'un kit Font Awesome
Vous pouvez ajouter des icônes Font Awesome à votre site en créant un kit Font Awesome, en ajoutant le code à votre en-tête HTML et en ajoutant les icônes à votre page. En savoir plus sur les kits Font Awesome.
- Commencez par créer un kit sur le site web de Font Awesome. Une fois le kit créé, vous obtiendrez une ligne de code que vous pourrez ajouter à HubSpot. Le code se présente comme suit :
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script> - Dans HubSpot, collez le code du kit dans l'en-tête HTML de votre site. Font Awesome sera alors disponible sur toutes les pages, selon le sous-domaine que vous choisissez lors de la modification de l'en-tête HTML de votre site. Pour ajouter Font Awesome à une seule page, vous pouvez ajouter le code du kit à l'en-tête HTML d'une page.
Ajouter des icônes à votre page
Pour ajouter une icône à une page, vous devrez modifier votre contenu HTML pour attribuer des classes Font Awesome à vos éléments. Dans HubSpot, cela peut impliquer la modification d'un module personnalisé ou d'un fichier codé, la modification d'un modèle de blog ou la modification du code source d'un module de texte enrichir dans l'éditeur de page.
Chaque icône se compose de deux éléments pour la déclaration de classe :
- Le nom de l'icône, affichant le préfixe fa-. Par exemple : fa-camera
- Le préfixe de style. Par exemple, fas.
Pour les icônes de marque telles que Facebook, vous devrez utiliser le préfixe de tank fab. Par exemple :
class="fab fa-facebook"
Vous pouvez utiliser un élément <i> ou <span> lors de l'insertion des icônes. Les deux méthodes fonctionnent dans l'exemple ci-dessous :
<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>En savoir plus sur les bases de l'utilisation d'icônes Font Awesome dans votre contenu.
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 |