COS-General

How To Install Font Awesome

Last updated: December 13, 2016

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:

  • Copy all of the code from this HubSpot-hosted font-awesome file. Make sure you select all of the code.
  • Paste the code into your CSS file. To be more specific, navigate to Content > Design Manager, locate and access your stylesheet, paste the code just copied from Step 1 within your stylesheet, and save it appropriately.
  • Publish your CSS file.

Now you are ready to use Font Awesome! 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 our WYSIWYG editors. When trying to implement 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>

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

Alternative to Steps 1-3

As an alternative to copying the font-awesome code into your existing CSS file, you could add the following link tag to the head tag of your Content Settings or Template Head Tag HTML section:

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

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 upload your own font files into File Manager and replace the @font-face reference with their src urls.