COS-General

How To Install Font Awesome

Last updated: May 18, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

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. Follow these steps to install Font-Awesome on the COS:

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. If you want to use newer icons that are not listed here, you will want to follow the steps here.

If you are using HubSpot's default Hubtheme, font-awesome is already included in hubtheme-foundation.css, and you can use the shortcodes described in this article to render font icons. Please note that the shortcodes are only available in Hubtheme (they require a special Javascript file).

  • Copy all of the code from this HubSpot-hosted font-awesome file (v4.1.0). Make sure you select all of the code.

  • Paste the code into your CSS file.

    • Navigate in HubSpot Marketing to Content > Design Manager, locate and access your stylesheet, paste the code just copied from the step above within your stylesheet, and save it appropriately.

  • Publish your CSS file. Learn how to use Font Awesome in your content here.

As an alternative to copying the HubSpot-hosted Font Awesome code into your CSS file, you could add the code to the head tag of your content settings or template head tag HTML section to reference this HubSpot-hosted Font Awesome file:

<link href="http://designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css" rel="stylesheet">

Once again, this link is to Font Awesome version 4.1.0.

 

To upload a Font Awesome file to your portal:

  • Download the version of Font Awesome that you'd like to use in HubSpot form http://fontawesome.io/ and unzip the folder on your computer.
  • Open the font-awesome.css file > copy its contents > paste the contents of this file in a stylesheet in HubSpot.
  • In another tab, open the HubSpot file manager by going to Content File Manager. 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 but with the URLs you copied from the 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;
}

  • Save your CSS file when all of the relative URLs are replaced and will be ready 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 (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?