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

Congratulations!

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

 

SIGNUP FOR

BOLDGRID CENTRAL  

   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.

25 thoughts on “Working with Icons

  1. It’s 2023 and there’s still no way to search for icons or even know what icons are in there without scrolling. Please update this because it’s a big waste of time.

    • Hi Jax,

      Thanks for reaching out although I’m sorry for the inconvenience. We do have the feature request in for this. I will speak with our developers on your behalf and see if there’s any way we can have this icon search feature implemented in an upcoming Post and Page Builder plugin update.

      Thank you for working with us through this.

      • Is there a list somewhere of all the icons? Not only is it a pain to scroll through…it’s an enormous pain to hunt! A list that was easy to scan (say, on a real webpage instead of in that little menu) would at least let me know what I’m looking for.

        This would be a helpful workaround until this feature becomes someone’s priority.

        Thanks!

        • Hi Robin,

          We appreciate you reaching for out. At this time we do not have a list of available icons available. I agree there should definitely be an easier way to sort through icons in the editor as I’ve been frustrated with this experience in the past as well. We do have a feature request in to our developers to improve the usability of the Icons menu. I’ll see what I can do to get this bumped up the priority list.
          You can follow the development of this issue on our GitHub Repository.

          Thank you!

        • Hi Robin!

          I’m happy to inform you that we’ve rolled out the searchable icons feature in the latest Post and Page Builder release! Please give it a try and let us know if you have any questions.

          Thanks Robin, we really appreciate your honest feedback!

  2. Hi, I’m trying to change the icon colors on our website from black to #428513, but I don’t see an orange “Customize Design” button to to do this. Am I missing something?

    I also need to change the color of buttons from black to #428513 but can’t find any option for it. Its set to #428513 in the Customize > Buttons section, but the buttons are still black. Help?

    • Hi Michelle,

      Thanks for reaching out! If you click on your icons content section and then select the “Font” Icon from the control options pop up box you can change the color of your icons the “Text Setting” control box the same way you’d do with fonts.

      I hope this helps!

    • 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.

  3. 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

  4. 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 Jake Cancel Reply

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