How do I use Font Awesome in my CTA?

Last updated: December 13, 2016

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.

First, you need to make sure you have installed Font Awesome. To do this, follow the instructions below: 

  • Copy all of the code from this HubSpot-hosted font-awesome file. Make sure you select all of the code.
  • Paste the code into your CSS file. To be more specific, navigate to Content > Design Manager, locate and access your stylesheet, paste the code just copied from Step 1 within your stylesheet, and save it appropriately.
  • Publish your CSS file.

Now you can add Font Awesome into your CTA. Follow the instructions below for this:

  • Navigate to Content > Calls-to-Action.
  • Click Create a CTA > give your CTA a name > insert your Link URL (like you would with any CTA.)
  • Click the Design tab > go into the Source Code of your CTA.
Also, please we aware that <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 in here > click OK.
  • To save your CTA click Create CTA.
  • Navigate to your HubSpot page and add your CTA.
  • View your live page and you'll see your CTA using Font Awesome.

Related articles: