How To Insert And Edit Icons In Rich Text Modules?
The HubSpot rich text module is the most commonly used content module in HubSpot content tools. It includes editing options for various components like text, images, and CTAs.
You can add any icon from the Font Awesome library to rich text modules on blog posts and pages. After adding the icon, you can change its color, position, and size. You cannot directly add icons to marketing emails. To use an email icon, save it as an image and then insert it into the email editor.
Add HubSpot Icon Module
- Navigate to your content as follows:
- Website Pages: Go to Marketing > Website > Website Pages in your HubSpot account.
- Landing Pages: Go to Marketing > Landing Pages in your HubSpot account.
- Blog: Go to Marketing > Website > Blog in your HubSpot account.
- Hover your mouse over your blog post or page name and select Edit.
- Click the rich text module in the location where you want the Icon to appear.
- Select Icon from the Insert dropdown menu in the upper right corner of the rich text toolbar.
- Use the search bar to look for the icon in the pop-up window.
- To insert it into your rich text module, click the icon.
Edit HubSpot Icon Module
- Navigate to your content as follows:
- Website Pages: Go to Marketing > Website > Website Pages in your HubSpot account.
- Landing Pages: Go to Marketing > Landing Pages in your HubSpot account.
- Blog: Go to Marketing > Website > Blog in your HubSpot account.
- Hover your mouse over the name of the blog post or page and select Edit.
- To open the icon editor, click your icon in the content editor.
- To change the icon’s color, go to the background Color icon dropdown menu and choose a color. Navigate to the Advanced tab to enter a hex or RGB color value.
- To move the icon to the right or left, use the indent icon.
- To move an icon within a text block, use the block alignment icons.
- Click the link icon to add a link to your icon.
Click and drag the icon’s corners in the editor to resize it, or enter pixel values for the width and height in the toolbar.
- 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 and then the trash icon.
- Click the image to replace it, then click the replace icon and add a new icon.
Edit Advanced Icon
After the HubSpot rich-text module, let’s know some advanced icon options for the HubSpot icon module:
You can edit your icon’s advanced settings to add accessibility text or customize the icon link.
- Click the icon in the content editor.
- Select the edit icon.
- Click Advanced in the pop-up window’s upper right corner.
- You can choose one or more link types if your icon is linked. This informs search engines about the relationship between this link and your website. Learn more about the various types of links.
- Choose a purpose for your image.
- Select Read by screen readers and give your icon a title that describes its purpose if it is meant to convey information.
- Select Ignored by screen readers if your icon does not convey information.
