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.

A screenshot of location icon with text in the front end of a website

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.
A screenshot of Layout Elements on a  page highlighting the Icon block option
  • 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.
A screenshot of an icon block
  • 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.
A screenshot of an icon block with a gallery of icons
A screenshot of the icon block highlighting the icon menu at the top of the block
  • 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.

A GIF demonstrating how to drag in existing content into the icon block

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.

A screenshot of the icon block highlighting the Link icon at the top of the block

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

Convert Icon Shortcodes

Did you previously use shortcodes to add icons on your website? Learn more about how to convert your content to use blocks.

Still Have Questions?

The quickest way to get support is to reach out to us within your website’s admin dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from us within one business day.