How To Get Font Awesome Icons in Your Elementor HTML Widget Buttons.
As you may know (if you have read my other post here), on this site I use a fantastic All-In-One Customer Communications platform called Consolto.
While integrating Consolto into my site there were a couple of issues that stopped me from getting the layout and design exactly as I wanted. In order to fix this I had to do a bit of research involving HTML, CSS and Font Awesome.
The greater issue I found whilst doing that, was that no one had put all this information in to one concise article. Which meant I spent around 2 hours trying to figure it out for myself. So, I decided to write this article for anyone else who might stuck in a similar and need some guidance or inspiration.
In image 1, you can see a screen capture of a simple pill style button. Pre-coloured and styled to match my site’s branding. Just as Elementor wants it to be, simple.
However, I needed it to look nicer, with Font Awesome 5 icons (image 2) and interact with the Consolto Plug-in. And that, my friends, was not so simple, nor so easy.
On the Consolto help page they tell you how to get their widget operating in 2 different ways;
<div data-et-click-type="start-chat"> Start chat</div>or
onclick="triggerConsoltoAction('open-widget')”Now, both of these are perfectly acceptable and relatively easy. But if you only used Elementor’s simple buttons, or even an Elementor Third-Party’s Plug-in’s more advanced button widget, there’s no way to add onclick() (this one isn’t for CSS), then you have to add your own Div in an HTML block (image 3).
This, of course, means building your own buttons from scratch. So that’s what we’ll do.
In order to do this we need to first, give our page/site access to the Font Awesome library. Secondly, we add the HTML block to the page and add build our button framework. Then, finally, add the custom CSS to the page (not the Block!).
Why the page and not the block? Well, if you are inserting more than one instance of the button, then you will have an equal amount of instances of CSS for each block and they will interfere with each other, if you try to change one, the other buttons will be affected, even if they do seem to have their own CSS! Especially if you haven’t given them ID’s or altered their Class name identifiers. It’s just not good coding practice either.
Step 1:
Add your Font Awesome Icons library
By putting the code in the page’s Custom CSS (accessed by the click the little gear icon at the bottom of the Widgets Panel (image 4)), you target all instances at once, so any changes don’t need to be copied to each one for consistency, which would be a pain and needlessly time consuming.
You can just add an additional class if you wish to change the button style a little, like the background colour for example.
