CMS-General

Comment installer Font Awesome ?

Dernière mise à jour: December 13, 2018

Disponible avec :

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basique
HubSpot CMS

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.

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

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

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.