Last updated on

In this article:

BoldGrid’s WordPress Page Builder gives you the ability to drag and drop Font Awesome Icons into your designs. The following guide will walk you through adding and modifying your Icon design.

Adding an Icon

  • Place the cursor in your content where you wish to place the Icon
  • Click the + in the DropTab to bring up the Block Components
  • Select Icon

Add icon in BoldGrid's WordPress website builder

  • Using the popover, select the Icon you wish to insert
  • Click the orange Customize Design button at the bottom of the panel to further customize your Icon

Icon list in the Post and Page Builder

Editing an Icon

  • Click on the Icon that you want to edit to open the Icon panel
  • Select an Icon design from the list of available options
  • Click Customize Design to further modify your Icon with:

Post and Page Builder Icon Customization


Now you know how to add and edit Icons to your WordPress website. Next, you may want to learn how to work with Fonts.




   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

18 thoughts on “Working with Icons

    • Hi Jake,

      What you need to do is click on the icon to select it (you’ll know you’ve correctly selected the icon when you see the Change Icon options to your right).

      Once you have the icon selected click on the Insert Link option at the top of the page editor and copy/paste the URL you wish to link to the icon.

      Check out this support video here, Jesse goes a little more in depth on the topic.

      Hope this helps!

    • Hi Arthur-

      This would be pretty tricky out-of-the-box, since it would involve modifying the actual font files, but it is theoretically possible. I’d probably recommend trying a plugin like WP SVG Icons, which already has this functionality built-in.

    • Hello dnikola-
      This functionality isn’t currently available in the Post and Page Builder, but you can use SVG images from Adobe Illustrator with a plugin like Safe SVG.

  1. Is there a way to change the rollover colour? At the moment it’s orange which clashes with my site but I can’t see any option to change that

  2. When I attempt to insert a block component in a particular place, it places it at the top of the page rather in the place I need it. Why is that?

    • Hello Carl-

      When you’re adding a block component to a specific spot on the page, be sure to grab it with the 4-direction arrow icon to drag it to where you need it. Check the 0:55 mark in this video to see a live example:

Leave a Reply to dnikola Cancel Reply

Your email address will not be published. Required fields are marked *