Skip to Content
Menu

Upgrading to Font Awesome 5 Pro

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

August 17, 2021

Demo


add_action('wp_enqueue_scripts', 'use_font_awesome_pro', 1000);
add_action('admin_enqueue_scripts', 'use_font_awesome_pro', 1000);
add_action('login_enqueue_scripts', 'use_font_awesome_pro', 1000);
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.
  • Worst case scenario, you could rename the handle of the new registration (the pro version) and then add an enqueue_style('new-name') underneath that.
Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!