Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Design Manager

Installer Font Awesome dans HubSpot

Dernière mise à jour: juillet 28, 2020

Disponible avec :

Hub Marketing Professional, Enterprise
Hub CMS Professional, Enterprise
Ancienne version Hub Marketing Basique

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.

    custom-module-icon-field
  • 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.

    custom-module-icon-field-insert
  • 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.

    custom-icon-module-page-editor

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.

À présent que le kit est installé, vous pouvez ajouter des icônes Font Awesome à vos pages HubSpot.

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
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
group (alias)
hdd-o
headphones
heart
heart-o
home
inbox
info
info-circle
key
keyboard-o
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
lightbulb-o
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
music
pencil
pencil-square
pencil-square-o
phone
phone-square
picture-o
plane
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left

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
facebook-square
flickr
foursquare
github
github-alt
github-square
gittip
google-plus
google-plus-square
html5
instagram
linkedin
linkedin-square
linux
maxcdn
pagelines
pinterest
pinterest-square
renren
skype
stack-exchange
stack-overflow
trello
tumblr
tumblr-square
twitter
twitter-square
vimeo-square
vk
weibo
windows
xing
xing-square
youtube
youtube-play
youtube-square
/fr/cos-general/how-to-install-font-awesome