How do I use Font Awesome in my CTA?

Last updated: May 29, 2018

Applies to:

Marketing Hub
Professional, Enterprise
Legacy Marketing Hub Basic

Font Awesome is a font of scalable vector icons that can be customized by size, color, and any other attribute that can be changed with CSS. Before getting started, make sure that you have installed Font Awesome

To add Font Awesome to your CTA:

  • In your HubSpot account, navigate to Marketing > Lead Capture > CTAs.
  • Click Create CTA or hover over an existing CTA and click Actions > Edit.
  • The editor sidebar menu will slide in. In the text editor, click the source code icon code to access the source code.
Note: <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>
  • Enter your code here for your Font Awesome icon and whatever text you'd like, and then click Ok. Click Next to proceed with the CTA editing steps, and then click Finish when you're done.