COS-General

Why aren't my icon module icons rendering?

Last updated: June 1, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

The icon module is available as part of HubTheme. To learn more about icon module, check out this article.

If your HubTheme icon module is rendering the icon short codes such as [fa icon="facebook-square"],instead of the actual icon, you will want to ensure that the correct HubTheme CSS and Javascript files are attached.

The icons require Font-Awesome which is included in HubTheme's CSS file theme-foundation-v1-0.css:
<link href="{{ get_public_template_url("hubspot_default/shared/responsive/theme-foundation-v1-0.css") }}" rel="stylesheet" type="text/css">

This file should be attached to your content or included in the head tag at the domain, template, or page level.

In addition, the icon module requires the theme-foundation.js. This Javascript file makes the shortcodes render as icons. These JS files are linked in HubTheme's global footer module group, which you can find under Content > Design Manager > Templates > Global Groups > hubtheme Theme > Footer.

User-added image
User-added image

<script type="text/javascript" src='{{ get_public_template_url("hubspot_default/shared/responsive/theme-foundation-v1-0.js") }}'></script>

To learn more about HubTheme's required files, refer to this article.