Miscellaneous

How To Make Font Awesome 5 Work With Elementor

Font Awesome 5 doesn’t work with Elementor’s stock social or icon widgets. You’ve probably noticed if you ever try to include Font Awesome 5 free or Pro in your WordPress web project, then used one of the widgets. It leaves a little blinking icon indicating it can’t find the icon in Font Awesome 5.

This is because Elementor uses Font Awesome 4 and the syntax changed slightly between the two versions. Luckily, with a little jQuery, we can make these icons work again. We’ll target social icons specifically here.

The jQuery Script To Fix Your Problems

jQuery(document).ready(function() {
jQuery(".fa-twitter, .fa-facebook, .fa-youtube, .fa-instagram").addClass('fab');
});

That’s it. Just put that in a script file, enqueue it with WordPress in your theme, and you should be good to go. I only included a few icons here, but feel free to add your own if you use others.

Good luck!

ideasandpixels

Author ideasandpixels

More posts by ideasandpixels

Ready to quote your new website? We are. Let's talk.

Send us your RFP or request a call or meeting with us so we can learn more about each other.