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
- Animation
- Responsive Utilities – show or hide the Icon on different screen sizes
- Custom CSS
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.
Jax says:
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.
Brandon says:
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.
Robin says:
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!
Brandon says:
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!
Brandon says:
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!
Michelle says:
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?
Brandon says:
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!
Jake says:
How do we add a hyperlink to the icon? I saw one of the blocks had it but am unable to replicate.
Brandon says:
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!
Arthur says:
I want to create my own specific icons to use. Is there a way to add them to the que?
Jesse says:
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.
dnikola says:
hello
what is the proper way to add more icons from custom icons from ai file?
thanks!
Jesse says:
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.
V says:
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
Jesse says:
Hello V,
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.
V says:
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
Carl says:
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?
Jesse says:
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:
Mekenna says:
Is there a more efficient way for me to search through the icons?
Jesse says:
Hello Mekenna,
There’s currently a feature request in the queue for this very issue. I’ve added your feedback as an upvote for the developers.
Neil says:
Yes, being able to search for a particular icon would be very helpful
Barbara says:
I would like to back up that request as well. Reviewing to select an icon is cumbersome with all the scrolling.
Jesse says:
Thanks Barbara-
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.
Arthur says:
Yes, please!
mariano says:
+1 please! 🙂