CMS-General

Install Font Awesome in HubSpot

Last updated: September 11, 2019

Applies to:

Marketing Hub  Professional, Enterprise
Legacy Marketing Hub Basic
HubSpot CMS

Font Awesome is a font of scalable vector icons that can be customized by size, color, and just about any attribute that can be changed with CSS. There are two ways to use Font Awesome in HubSpot:

Use the icon field in custom modules

You can select from pre-installed Font Awesome icons by adding an icon field to your custom modules. To add an icon field to a custom module:

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • From the finder in the left sidebar, select an existing custom module. Or, create a new custom module.
  • Add an icon field to the module by clicking Add field in the right sidebar, then selecting Icon.

    custom-module-icon-field
  • You can further customize the field by setting default values and editor options. Learn more about customizing module fields.
  • Add the icon field to the module body by hovering over the field in the right sidebar, then clicking Actions. Select Copy snippet, then paste the snippet into the HTML + HUBL section where you want the icon to appear.

    custom-module-icon-field-insert
  • In the upper right, click Publish.
  • If this is a new module, add the module to any templates where you want to use the icons. Click Publish in the upper right to publish the template changes.
  • You can now select Font Awesome icons in your custom module, either from the design manager or page editor.

    custom-icon-module-page-editor

Install and use Font Awesome manually

To manually install Font Awesome in HubSpot, you should be comfortable editing the stylesheets on your site. In order to install and use Font Awesome manually in HubSpot, you will need to first upload Font Awesome to your file manager, then update your HTML elements to use Font Awesome classes.

 Upload Font Awesome to your file manager

  • Download the version of Font Awesome that you want to use in HubSpot from http://fontawesome.io/ and unzip the folder on your computer.
  • Open the font-awesome.css file and copy its contents.
  • Paste the contents of this file in a stylesheet in HubSpot.
  • Open a new tab in your browser to access your file manager. In your HubSpot account, navigate to Marketing > Files and Templates > Files. Here, you will want to upload all of the Font Awesome font files referenced in the Font Path section of the Font Awesome CSS.
  • Once you have uploaded these files to your HubSpot file manager, copy the URLs of each file and replace all of the relative links in your CSS with each corresponding file's file manager URL. Your code will look something like this, except you'll see the URLs you copied from your own file manager:

/* FONT PATH
* -------------------------- */
@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;
}

  • Click Publish changes in your stylesheet when all of the relative URLs are replaced.

Use Font Awesome

Once you have either referenced the HubSpot-hosted version of Font Awesome or uploaded your own files to your portal, you'll be ready to use Font Awesome in your content. Font Awesome will be applied to elements with class="fa" and a class specific to the icon that you would like to render.

For example:

class="fa fa-facebook"

Please note that Font Awesome icons will not work in email. Also, please be aware that <i class=...> elements cannot be used with the source code of HubSpot WYSIWYG editors. When implementing Font Awesome Icons, it is best to use <span> tags as noted in the example below:

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

HubSpot-hosted Font Awesome icons

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

Please note: the HubSpot-hosted version of Font Awesome is not kept up-to-date. If you want to use newer icons, you must upload your own font files into your file manager and replace the @font-face reference with their src urls.