Putting Font Awesome icons above text boxes in Beaver Builder Lite
I’ve installed two plugins, Beaver Builder Lite and PowerPack Lite for Beaver Builder.
One of the PowerPack Lite modules makes it easy to add a textbox with Font Awesome icons.
Font Awesome icons above text boxes in WordPress
The module I use to add Font Awesome icons in a text box is the Power Pack Info Box module
First I dragged the Info Box module into a Beaver Builder layout column.
Then I needed to configure the info box settings.
General tab…
- Layout: Icon at top
- Icon type: Icon
- Select an icon
Content tab…
- Title prefix: leave this box empty
- Title: type your title in here
- Description: type the paragraph that you want to display beneath your icon and title
Link tab…
The settings in this box enable you to add a button beneath your icon and text.
- If you want a button, make sure you choose the button option in the Link Type box.
- Then work your way through the other settings in the link tab, don’t forget to add a url and a background colour for your button.
- To add more space between the text and the button type a size into the margin box.
Icon Style tab…
- Set the size and colour for your icon.
Typography tab…
- Set the font family and font size for the title and description.
- If you want to change the font size used on tablets and mobiles, click the small monitor icons at the side of the font size settings boxes.
- When you’re happy with the styling of the first icon box, duplicate that module twice using the small Duplicate icon in the module’s toolbar.
- Then drag the two extra modules into the two empty columns.
- Change the icons and text and urls, but keep the styling settings the same.
Click the big blue Done button in the Beaver builder toolbar, then click publish changes and the new row is complete.
