How to Add Font Awesome Icons to WordPress Menu

Share: How to Add Font Awesome Icons to WordPress Menu

How to Add Font Awesome Icons to WordPress Menu and site using a plugin or using code. It’s up to you. We love to help the community and answers your questions. If you have a question like this one, ask on our Facebook community here.

How to Add Font Awesome Icons to WordPress Menu

How to Add Font Awesome to WordPress Using the Plugin

Font Awesome has an official WordPress plugin to assist with adding Font Awesome to your site without having to touch a line of code. The Font Awesome by font Awesome plugin is easily setup with a few clicks.

  • Supports both Font Awesome Free and Font Awesome Pro.
  • Gets new icon updates directly from fontawesome.com right when they’re released, ready to add to your site as soon as you like. New icons are released regularly.
  • Provides easy configuration to enable the new SVG framework with extra features like Power Transforms.
  • Easily spot and fix conflicts when using SVG would conflict with other plugins or themes that require the classic Web Fonts & CSS method.
  • Loads icons from the fast Font Awesome Free CDN, or the Font Awesome Pro CDN for Pro subscribers.
  • Provides a “v4-shim” to ease the upgrade from Font Awesome 4 to Font Awesome 5.
  • and more…. See https://wordpress.org/plugins/font-awesome/

Add Font Awesome to WordPress Manually with a Little Code

There are two ways to add Font Awesome to your WordPress site. Font Awesome recommends going to https://fontawesome.com/start and copying the code and adding it to your <head> section but there is a better way.

WordPress recommends (and so does Press Avenue) to enqueue the code in the functions.php file or a custom functionality plugin.

The WordPress snippet below allows you to add Font Awesome to your WordPress site without a plugin. This snippet should be added to either your functions.php file or a custom functionality plugin. The version can be updated if it is newer than 5.7.2.

Side Note: When we were creating this video Font Awesome upgraded to 5.8.0! That’s why we love it.

For example, if the newest version is 5.8.0 when you read this then change the link below to: //maxcdn.bootstrapcdn.com/font-awesome/5.8.0/css/font-awesome.min.css

Note: Backup WordPress before adding this in.

//enqueues our external font awesome stylesheet

function enqueue_our_required_stylesheets(){
	
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/5.7.2/css/font-awesome.min.css'); 
}

add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

https://gist.github.com/JohnBunka/84a1d16fbb34619f48c9206922f3d91d


Add Font Awesome to WordPress Manually & Locally

The WordPress snippet below allows you to add Font Awesome to your WordPress site. It assumes you have downloaded Font Awesome and uploaded it to your server in the /css folder.

Note: Backup WordPress before adding this in.

//enqueues our locally supplied font awesome stylesheet

function enqueue_our_required_stylesheets(){
	
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}

add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

https://gist.github.com/JohnBunka/f3696ca25bbfcc465db5a456c922af5f


Have a question about WordPress? Or how to use it in your business? Just ask! We love answering your questions and helping out the community.
Ask Press Avenue here