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