Use Font Awesome in HubSpot
Last updated: October 13, 2020
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 two most common methods of using Font Awesome in HubSpot are:
- Using the icon field in custom modules
- Using a Font Awesome kit
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 convert icons into 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.
- 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. 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.
- 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.
HubSpot-hosted Font Awesome icons
adjust anchor archive arrows arrows-h arrows-v asterisk ban bar-chart-o barcode bars beer bell bell-o bolt book bookmark bookmark-o briefcase bug building-o bullhorn bullseye calendar calendar-o camera camera-retro caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up certificate check check-circle check-circle-o check-square check-square-o circle circle-o clock-o cloud cloud-download cloud-upload code code-fork coffee cog cogs comment comment-o comments comments-o compass credit-card crop crosshairs cutlery dashboard (alias) desktop dot-circle-o download edit (alias) ellipsis-h ellipsis-v envelope envelope-o eraser exchange exclamation exclamation-circle exclamation-triangle external-link external-link-square eye eye-slash female fighter-jet film |
filter |
quote-right random refresh reply reply-all retweet road rocket rss rss-square search search-minus search-plus share share-square share-square-o shield shopping-cart sign-in sign-out signal sitemap smile-o sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-down (alias) sort-numeric-asc sort-numeric-desc sort-up (alias) spinner square square-o star star-half star-half-empty (alias) star-half-full (alias) star-half-o star-o subscript suitcase sun-o superscript tablet tachometer tag tags tasks terminal thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o tint toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) trash-o trophy truck umbrella unlock unlock-alt unsorted (alias) upload user users video-camera |
volume-down volume-off volume-up warning (alias) wheelchair wrench check-square check-square-o circle circle-o dot-circle-o minus-square minus-square-o plus-square plus-square-o square square-o bitcoin (alias) btc cny (alias) dollar (alias) eur euro (alias) gbp inr jpy krw money rmb (alias) rouble (alias) rub ruble (alias) rupee (alias) try turkish-lira (alias) usd won (alias) yen (alias) angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up |
chevron-down chevron-left chevron-right chevron-up hand-o-down hand-o-left hand-o-right hand-o-up long-arrow-down long-arrow-left long-arrow-right long-arrow-up toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) arrows-alt backward compress eject expand fast-backward fast-forward forward pause play play-circle play-circle-o step-backward step-forward stop youtube-play adn android apple bitbucket bitbucket-square bitcoin (alias) btc css3 dribbble dropbox facebook-square flickr foursquare github github-alt github-square gittip google-plus google-plus-square html5 linkedin-square linux maxcdn pagelines pinterest-square renren skype stack-exchange stack-overflow trello tumblr tumblr-square twitter-square vimeo-square vk windows xing-square youtube youtube-play youtube-square |
Related content
-
Manage multi-language content
You can manage content for your global audience in multiple languages on your landing pages and website...
Knowledge Base -
Add smart content to your emails, website pages, landing pages, and templates
With smart content, a module can display different versions of your content based on certain viewer criteria.
Knowledge Base -
Create and edit modules
In the design manager tool, you can create custom coded modules to add custom or advanced features to your...
Knowledge Base