Get Elementor Font-Awesome from CDN

Elementor is a popular page builder for WordPress. It comes bundled with Font-Awesome icons. The good news is: Elementor is smart and will not load the files when you don’t use Font-Awesome icons on your website. But if you do – even just one – the icons and styles are loaded, of course. Unfortunately, these come from the plug-in directory, not from a Content Delivery Network (CDN) which is much better for page speed.

So, how can you achieve that? With just a little code in the functions.php file of your child theme or in a plug-in called Code Snippets. See code below, where we use CloudFlare’s free CDN:

function cambodesign_font_awesome() {
wp_dequeue_style( 'font-awesome' );
wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'cambodesign_font_awesome', 100 );

Note the number ‘100’ at the end of ‘add_action’. This is important for the time this runs and for this to work properly.

Alternatively, you can just enqueue font-awesome from a CDN, making sure it runs before font-awesome styles are called by Elementor, like so:

function cambodesign_font_awesome() {
wp_enqueue_style ( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'cambodesign_font_awesome()', 3);

Note, we removed ‘wp_dequeue_style’ and the number in ‘add_action’ is now ‘3’. For this to work, you need to know at what point in your theme Elementor loads its font-awesome styles. If your CDN file is loaded before that, it will simply be skipped.