COS-General

How to install Font Awesome

Last updated: May 31, 2018

Applies to:

Marketing Hub: Basic, Pro, Enterprise

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. In order to proceed with the directions below, you should be comfortable editing the CSS files on your site.

Follow these steps to install Font-Awesome in HubSpot:

How to use the HubSpot-hosted version of Font Awesome

Please note that the HubSpot-hosted version of Font Awesome is not kept up to date. To access any newer icons that are not included on this list, you will want to follow these instructions.

As an alternative to copying the HubSpot-hosted Font Awesome code into your CSS file, you could paste the same code into the Site header HTML field in your settings, or in the head tag HTML section of a specific page.

To upload a Font Awesome file to your portal

  • Download the version of Font Awesome that you'd like 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 Marketing Hub Basic, Professional, or Enterprise 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;
}

  • Publish changes in your CSS file when all of the relative URLs are replaced, and you can start to use Font Awesome.

Using 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-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-ul">
<li><span class="fa-twitter fa"></span>Twitter Icon</li>
<li><span class="fa-list-ul fa"></span>List Icon</li>
<li><span class="fa fa-camera-retro fa-lg fa"></span>Camera Icon</li>
</ul>

Was this article helpful?