Pages

Wednesday, March 15, 2023

How to CDN Elementor's Font Awesome CSS and JS






This is how to overload Elementor's plugin which uses Font Awesome Icons CSS and JS files to use a CDN for page speed optimization. 







Key to this setting the priority to run after plugins are loaded, and that why we are using wp_head  hook  with an add_action priority 5. If this is larger or equal to 10 this did not work. You have to experiment to find your own priority level. 
//Wed 15-Mar-23 10:12pm metadataconsulting.ca
function mdc_font_awesome_elementor_CDNify()
{
	//WARNING: This will change the order of the script be loaded pay close attention to rendering of pages
	wp_dequeue_style('font-awesome-5-all');
	wp_deregister_style('font-awesome-5-all');
	wp_enqueue_style( 'font-awesome-5-all', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css', array(),  '5.15.3');
		
	wp_dequeue_style('font-awesome-4-shim');
	wp_deregister_style('font-awesome-4-shim');
	wp_enqueue_style( 'font-awesome-4-shim', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/v4-shims.min.css', array(), '5.15.3' ); 

	wp_dequeue_script('font-awesome-4-shim'); 
	wp_deregister_script('font-awesome-4-shim'); 
	wp_enqueue_script('font-awesome-4-shim','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/v4-shims.min.js', [], '5.15.3', false );
	
}

add_action( 'wp_head', 'mdc_font_awesome_elementor_CDNify', 5 ); 

No comments:

Post a Comment