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
- 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
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:
- Padding and Margin – What’s the difference between padding and margin?
- Font Size
- Color and Background Color – Don’t see the color you want? Learn how to change colors in the Customizer
- Rotation – Please note that not all Icons can be rotated
- Border and Border Radius
- Responsive Utilities – show or hide the Icon on different screen sizes
- Custom CSS
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.
22 thoughts on “Working with Icons”
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.
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.
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?
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!
How do we add a hyperlink to the icon? I saw one of the blocks had it but am unable to replicate.
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!
I want to create my own specific icons to use. Is there a way to add them to the que?
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.
what is the proper way to add more icons from custom icons from ai file?
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.
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
This color will be controlled in your Color Palette, but you can also customize it using Custom CSS. If you need help determining how to customize this, please visit the Support Forums and include a link to your site so our team can take a look and help further.
Thank you – this colour is not in the colour palette so I don’t understand where it is pulling from. I will look on the forums as suggested
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?
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:
Is there a more efficient way for me to search through the icons?
There’s currently a feature request in the queue for this very issue. I’ve added your feedback as an upvote for the developers.
Yes, being able to search for a particular icon would be very helpful
I would like to back up that request as well. Reviewing to select an icon is cumbersome with all the scrolling.
I’ve added your feedback to the feature request, and I’ll make a personal call to the developers to point out the growing demand for this.
+1 please! 🙂