Adding Icons to Your Content

Icons provide an easy and effective way to add visual emphasis to your website. These symbols can be linked to help users get to a subpage or simply communicate the information on the page. You can see how icons are used on the About page of our Pioneer Demo.

How to Add an Icon to Your Page

You can add an icon to any content on your website by adding the Icon block in your WordPress Editor.

• Make sure you’re signed in to the back end of your website and navigate to the page you’d like to add an icon to.
• Hover over the top or bottom of an existing block to reveal a blue “plus” icon. Click on the plus icon to add a new block.
• Select the Icon block from the list to add it to the desired spot on your page.

• Tip: You can also use “Enter” or “Return” to create a new block. Then, type “/icon” to quickly find and add the Icon block to your page.

• Scroll through the available icons or use the “Search Icons” field to find the icon you’d like to add. A full gallery of the icons available can be found at Font Awesome.

• Once you’ve selected an icon, you have several options to format it on your page:
  • Position the icon with wrapped text or on its own line
  • Resize the icon to be small, medium or large on the page
  • Choose to show content beside or under your icon
  • Link your icon to a related page or post on your website

• Once you’ve got your icon set up the way you’d like, preview or publish your changes by clicking the gray Preview button or blue Update button in the upper right-hand corner of your screen.

Using the Show Content option

When you choose to use the “Show Content” option for an icon, you’ll see default text prompting you to “Start writing or type / to choose a block”. Within this section, you can add new text, nested blocks or drag in existing content blocks to pair with the icon.

You can also turn off this option entirely by clicking the eye icon with a slash through it.

Using the Link Icon option

Select the “Link Icon” option to link your icon to another page of your website or an external resource. When you click the link button, a field will appear. Start typing the name of the page you’re planning to link to or paste in a website URL. Then click the “Apply” button to ensure your icon is linked.

Your icon will change color. This helps users to understand that the icon is a link and can be clicked.