Headings and Font Awesome Icons

It is possible to invert the style of Headings 2 and 3 so that the text is white with a background color. You can also add a Font Awesome icon next to a heading, and the color will match the text of the heading.

Inverted Heading Colors

You can invert the colors of headings to break up long pages of text for both Heading 2 and Heading 3. This can help make long pages easier to read.

H2 Heading with Background Color

The font color is white and the heading has a background color.

H3 Heading with Background Color

Copy and paste the heading while in Edit HTML mode, or put your cursor in the heading, click the plus icon in the toolbar, choose Attributes, and add the Class name bg-color.

Font Awesome Icons

You can also add a decorative Font Awesome icon that will appear to the left of a heading. Click on the icon, click the plus icon in the toolbar, choose Attributes, and change the Class name to another Font Awesome icon name (for example, change fas fa-info-circle to fas fa-question-circle).

Or to insert an icon next to a heading, first copy the HTML code for a Font Awesome icon (such as <i class="fas fa-info-circle"></i>). Put your cursor at the beginning of the text for either Heading 2 or Heading 3, click Insert Stuff, choose Enter Embed Code, and paste in the code. Delete the entire heading to delete the icon. You can also insert an icon within a paragraph.

Customize Font Awesome Icons

You can easily change the size and color of a Font Awesome icon within paragraphs by setting styles separated by semi-colons in the editor toolbar. The following icon has the styles font-size: 36px; color: #6e005f applied to it.

Click on the icon, click the plus icon in the toolbar, choose Attributes, and add your own styles in the Style box.