Manually add Font Awesome icons in HubSpot (2024)

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

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 toMarketing > Files and Templates > Design Tools
• From the finder in the left sidebar, select an existing custom module. Or, create a new custom module.
• 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. SelectCopy 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. ClickPublish 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.

  

  See Also

  Why you Should Start Using Font Awesome

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.

• Start by creating a kit on Font Awesome's website. Once you create a kit, you'll be given a line of code that you can add to HubSpot. The code will look similar to:

  <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

• In HubSpot, paste the kit code into your site head HTML. This will make Font Awesome available across all pages, depending on the subdomain you choose when editing your site head HTML. To add Font Awesome to one page only, you can instead add the kit code to an individual page's head HTML.

Add icons to your page

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:

• The icon name, prefixed by fa-. For example:fa-camera
• The style prefix. For example,fas.

For brand icons, such as Facebook, you will need to use the fab style prefix. For example:

class="fab fa-facebook"

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.

Add icons to your CTAs

After installing Font Awesome in HubSpot, you can use Font Awesome in your CTAs.

• In your HubSpot account, navigate toMarketing > Lead Capture > CTAs
• In the upper right, click Create CTA, or hover over an existing CTAand click theActions dropdown menu and selectEdit.
• In the right panel, rich text editor, click the source code iconcode.

Please note:<i class=...> elements cannot be used with the source code of HubSpot's rich text editors. Whenyou areimplementing Font Awesome icons, it's recommended to use <span> tags as noted in the example below.

<h2>Font Awesome Icons Example</h2>
<ul class="fa-ul">
<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>
</ul>

• Enter your code for your Font Awesome icon along with any text, and then click Save changes.
• Click Next,then click Save.