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!

Leave a Reply


Author ideasandpixels

More posts by ideasandpixels

Leave a Reply