Categories
Multimedia Design WordPress WordPress Workshop

Add Fontawesome to WordPress

Font awesome is a very large collection of icons for any webpage. Installing Fontawesome is easy. If you link to the CSS in the head section of your webpage, you’re ready to go. But how can we do this on WordPress?

In this tutorial you’ll learn how to create a plugin that will add Fontawesome to your WordPress. Font awesome is a very large collection of icons for any webpage. Installing Fontawesome is easy. If you link to the CSS in the head section of your webpage, you’re ready to go. But how can we do this on WordPress?

The best solution is a permanent one. More than often you’d want icons from Fontawesome in the menus. You could add the link to Fontawesome in your childtheme. But then you’d have to add it again when you choose a new theme. We need a more permanent solution.

What we need is a plugin.

It is surprisingly easy to create a plugin for WordPress. Here is a step by step guide.

a) Create a directory for the files

First you have to create a directory for your files. The name of the directory is up to your imagination. But try to name your directory so that you know what the theme will do. In this case I choose the name:

fontawesome

b) Create some files

In the directory we need a few files. Create them in your favorite editor:

  • index.php
  • addFontawesome.php

c) index.php

Leave this file blank. The file is used for security reasons. If there is a blank index.php file in the directory, unwanted guests cannot see the content of the directory.

c) addFontawesome.php

This file is the actual plugin. Here we have to define the function that will add fontawesome to the <head> section of the active theme. A plugin will allways begin with a comment. WordPress will use this comment in order to display informations about the plugin in the Dashboard. Here is the comment we need:

<?php
/*
Plugin Name: add Fontawesome
Plugin URI: https://github.com/asathoor/plugins
Description: Will add the CSS for Fontawesome.
Version: 1.0
Author: Per Thykjaer Jensen
Author URI:https://multimusen.dk
Textdomain: Pers2020Child
License: GPLv3
About this version: Minor bug fix.
*/

Then we need a function, that will be able to add CSS to the <head> section of the active theme. Here we will use wp_enqueue_style:

function petj_fontawesome(){
  wp_enqueue_style(
    'petj-fontawesome',     'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css', 
    array(), 
    '6.0.0');
    }

wp_enqueue_style will add some informations about the CSS. In this case the ‘petj-fontawesome’ is the name we give the stylesheet in the system. The long URL

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css

Is the link to a Fontawesome CDN. If you click on the link you’ll see the styles that will be loaded.

array() will add the data as an array.

The numbers ‘6.0.0’ is the version of the script. If you add your own scripts you can give it any suitable number.

The file must end with an add_action. Such an action will execute the function above – and then the CSS will be part of the <head> section in WordPress.

Here is the add_action:

add_action('wp_enqueue_scripts', 'petj_fontawesome' );

The add_action has two parts:

  1. wp_enqueue_scripts is a function that will add styles og scripts to WordPress.
  2. petj_fontawesome is the function we created before. So the functions is invoked and executed. Then the CSS will be part of your WordPress.

d) Prepare your plugin for installation

WordPress can install plugins via zip-files. Compress the directory with the files. Most operative systems have a compress option when you right-click the directory. Then a file called fontawesome.zip is created.

e) Install the plugin

Now go to the Dashboard in WordPress. In Plugins select add plugin. Choose the Upload File option. Follow the instructions on the screen, and remember to activate your new plugin.

f) Use Fontawesome

Now you can use Fontawesome. The icons are added via HTML, like this:

<i class="fa fa-car" style="font-size:60px;color:red;"></i>

If you add code along these lines to a custom HTML block in the WordPress editor – or Elementor, the result will be this:

In the menus you can add the Fontawsome icons in the description. Now you can use the icons from Fontawesome in any theme.

By Per Thykjaer Jensen

Per is the WordPress expert at Business Academy Aarhus. Senior Lecturer at the Multimedia Design Programme. His background is in the Arts: MA Literature History and BA Art History. Later he added a MA in IT, interaction and Multimedia. And he is a wicked Linux user.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.