Skip to Content

Upgrading to Font Awesome 5 Pro

This example shows how to upgrade to Font Awesome 5 Pro for your child theme.

August 10, 2020

Demo


add_action('wp_enqueue_scripts', 'use_font_awesome_pro');
add_action('admin_enqueue_scripts', 'use_font_awesome_pro');
add_action('login_enqueue_scripts', 'use_font_awesome_pro');
function use_font_awesome_pro(){
	if ( wp_style_is('nebula-font_awesome', 'registered') ){
		wp_deregister_style('nebula-font_awesome');
		wp_register_style('nebula-font_awesome', get_stylesheet_directory_uri() . '/assets/css/vendor/all.min.css', null, '5.14.0', 'all'); //Feel free to rename this file to make it more obvious if desired
	}
}
		

Additional Notes

Be sure to upload the Font Awesome Pro webfonts folder to the /assets/css directory. It is recommended to use the all.min.css file which loads the fonts (.woff files) themselves.

Nebula provides rudimentary support for the Font Awesome JS method, but the CSS method is strongly recommended.

If icons are not working

  • Check to make sure the Font Awesome library is being loaded (try the Network panel in Chrome DevTools)
  • If the library (CSS file) is being loaded, but the icons do not appear, ensure you’ve uploaded the webfonts folder to the proper location. Font Awesome uses ../webfonts so it must be in the directory above the folder that the CSS file lives in.
  • If icons still don’t appear, view the source code of the library file (CSS) and do a find for woff. If this does not appear, then Font Awesome is not loading the font files itself– this could mean you are not using the all.min.css file.
  • Your child theme icons are working, but now parent Nebula theme icons are broken? If you’re using the Font Awesome JS method (as opposed to the CSS method), this is not entirely supported by Nebula.
  • Some icons are working and others are not? Make sure your HTML uses the appropriate classes (fab for brands, fas (solid), far (regular), etc.) If you are custom building the font files to optimize the size, make sure you include all of your icon needs as well as all of Nebula’s.