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
Share & Help Out the Community
[Sassy_Social_Share]
Posted in Code Snippet, WordPress Plugins, WordPress Tutorial, WordPress YouTube Tutorial Tags: FontAwesome
Let us know what you think of the How to Add Font Awesome Icons to WordPress Menu WordPress Tutorial. Feel free to ask a question or give your two-cents. Additionally, you can continue the discussion on our Free Facebook Group: "WordPress Tutorials & Community Help"