Mar 8, 2021 1:55 PM - edited Mar 9, 2021 8:14 AM
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. The easiest way to use Font Awesome icons in your content is by adding them in HubSpot's content editor.
The content editor currently uses version 5.6 of Font Awesome's library. You can access other versions of the Font Awesome Library by following the instructions below.
Please note: Font Awesome icons will not work in email because the majority of email clients don't render webfonts. To use icons in an email, you will instead need to save icons as images, then insert the images into the email editor.
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:
You can add Font Awesome icons across your site by creating a Font Awesome kit, adding the code to your head HTML, and then adding the icons to your page. Learn more about Font Awesome kits.
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
Now that the kit is installed, you can add Font Awesome icons to your HubSpot pages.
To add an icon to a page, you'll need to edit your content HTML to assign Font Awesome classes to your elements. In HubSpot, this could mean editing a custom module or coded file, editing a blog template, or editing the source code of a rich text module in the page editor.
Each icon has two parts to the class declaration:
For brand icons, such as Facebook, you will need to use the fab style prefix. For example:
You can either use an <i> element or <span> element when inserting the icons. In the example below, both methods work:
<i class="fas fa-camera"></i> <span class="fas fa-camera"></span>
Learn more about the basics of using Font Awesome icons in your content.
After installing Font Awesome in HubSpot , you can use Font Awesome in your CTAs.
<h2>Font Awesome Icons Example</h2>
<li><span class="fab fa-twitter"></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>
Jun 19, 2022 10:49 AM
Bringing attention to author's original post that the icon option default "copy snippet" approach throws an error. I'm in production so I'm going to fall back to the old "photochop-it" strategy.
Documentation on the error: https://community.hubspot.com/t5/CMS-Development/Custom-Module-Isn-t-Generating-HubSpot-Icons/m-p/42...
- Live long and write code
May 11, 2021 7:35 AM - edited May 11, 2021 7:38 AM
Hi @vrneuman ,
thank you for this very helpful community post and the introductions! - As my team also wanted to extend the available icons for our Hubspot Landingpage use cases, we also just bought the Fontawesome Pro license and integrated the Pro Kit succesful into our pages header.
But I just had the following issue: now it works to add the additional icons via source code e.g. in the richt text module very well. But when I try to add such new Icons via Insert - Icon , these additonal Kit icons are not available in the selection.
Do you probably know if its possible to extend this icon selection too?
Thanks for your help and feedback in any case!
Apr 27, 2021 9:26 PM - edited Apr 27, 2021 9:27 PM
The icon field/tag use seems like a great option here - but I'm really having trouble in controlling the size of the icon created (outside of the <div> example given). How would size be controlled match font size in a <span> for example?
Apr 28, 2021 6:08 AM
Thank you for reaching out.
You can now insert and edit icons in your rich text modules by following these steps - that should make the process easier
Hope that helps.
Have a lovely day,
Mar 9, 2021 6:44 AM
Thank you for sharing @vrneuman !