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.
Use the icon field in custom modules
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:
In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools
Add an icon field to the module by clicking Add field in the right sidebar, then selecting Icon.
You can further customize the field by setting default values and editor options. Learn more about customizing module fields.
Add the icon field to the module body by hovering over the field in the right sidebar, then clicking Actions. Select Copy snippet, then paste the snippet into the HTML + HUBL section where you want the icon to appear.
In the upper right, click Publish.
If this is a new module, add the module to any templates where you want to use the icons. Click Publish in the upper right to publish the template changes.
You can now select Font Awesome icons in your custom module, either from the design manager or page editor.
Use a Font Awesome kit
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.
After installing Font Awesome in HubSpot , you can use Font Awesome in your CTAs.
In your HubSpot account, navigate to Marketing > Lead Capture > CTAs
In the upper right, click Create CTA, or hover over an existing CTA and click the Actions dropdown menu and selectEdit.
In the right panel, rich text editor, click the source code icon code.
Please note: <i class=...> elements cannot be used with the source code of HubSpot's rich text editors. When you are implementing Font Awesome icons, it's recommended to use <span> tags as noted in the example below.
May 11, 20217:35 AM - edited May 11, 20217:38 AM
Manually add Font Awesome icons in HubSpot
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! Best, Constantin
Thanks very much for the helpful post.. but I'm trying to do the same thing as Constantin.
I'd like to use the "Insert Icon" functionality in modules such as the Rich Text module but have the list of icons that are available be sourced from either the full range of icons provided by Font-Awesome Pro 6.x or my personalised Font Awesome Kit - or both.
Is there anyway to do this?
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?