Upgrading to Font Awesome Pro

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, '6.5.2', 'all'); //Feel free to rename this file to make it more obvious if desired. Also ensure the version number matches the version you are using!
	}
}
		

Additional Notes

Instructions

Download the Pro version of Font Awesome for Web here: https://fontawesome.com/download (reference the version number there).

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.

Then use the provided code snippet on this page in your child theme functions file (either functions.php, /functions/nebula_child.php, or any custom location you’ve created).

If icons are not working

• Make sure you are calling the appropriate version number. The latest version number can be found here and also here.
• 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.

« Back to examples list