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
- Copy all of the code from this HubSpot-hosted font-awesome file (v4.1.0).
- Open your design manager. In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Design Tools.
- Open the stylesheet applied to your content and paste the code copied from the step above. If you're unsure which stylesheet you want to update, learn how to find the stylesheet of a specific piece of content.
- Click Publish changes to update your CSS file. Learn more about 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 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
* -------------------------- */
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');
- 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.
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>
<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>