Insert and edit icons in rich text modules

You can add any icon in the Font Awesome library to rich text modules on blog posts and pages. Once the icon is added, you can customize its color, positioning, and size. 

Please note: icons cannot be added directly to marketing emails. To use an icon in an email, save the icon as an image, then insert the image into the email editor. 

Add an icon to your content in a rich text module

• Navigate to your content:

  • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
  • Blog: In your HubSpot account, navigate to Content > Blog.

• Click the name of your content. 
• Click the rich text module where you want the icon to appear.
• In the upper right of the rich text toolbar, click the Insert dropdown menu and select Icon.

• In the pop-up box, search for the icon in the search bar. 
• Click the icon to insert it into your rich text module. 

Edit an icon

Once you've inserted your icon, you can edit its appearance and position, or link to other content. 

• Navigate to your content:

  • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
  • Blog: In your HubSpot account, navigate to Content > Blog.
• Click the name of your content. 
• In the content editor, click your icon to open the icon editor.

1. • To edit the icon's color, click the backgroundColor icon color dropdown menu and select a color. To enter a hex value or RGB color value, click the Advanced tab. 
   • Use the indent indent iconiconiconicons to move the icon right or left.
   • Use the blockAlignmentBottom alignment icons to adjust the icon's position within a block of text. 
   • To add a link to your icon, click thelinklink icon, then insert a link.
   • To resize your icon, click and drag the icon's corners in the editor or enter pixel values for the width and height in the toolbar.

• To remove an icon from a rich text module, click the image, then click the deletetrash icon .
• To replace the icon, click the image, then click the replace replace icon and add a new icon.

Edit advanced icon options

You can edit advanced options for your icon to add accessibility text or customize the icon link. 

• In the content editor, click the icon. 
• Click the edit edit icon.
• In the pop-up box, click Advanced.
• If your icon has a link, you can select one or more link types. This tells search engines how this link relates to your website. Learn more about different link types.

• Select a purpose for your image.
  • If your icon is intended to convey information, select Read by screen readers and add a title that describes its purpose.
  • If your icon does not convey information, select Ignored by screen readers. 
• Click Apply.