The icons give great visibility to the elements of a web. Without going any further, the WordPress admin menu itself is created based on icons, and that speeds up the task of identifying the options, instead of having to stop to read them.
The icons reinforce the message we want to give then, after all, «A picture is worth a thousand words“, do not?
In this tutorial, we will show you how to add them to the top menu on WordPress with or without any plugin. But we will do it using icon fonts instead of icon images. Why? Because that way:
- Our icons will be vector, never becoming pixel and automatically adapting to all types of screens. Also to the retina.
- They will behave like a source, so we can change them in color and size only with CSS.
- They weigh less, much less than a normal image.
- And they have a transparent background, so we won’t have to worry about placing them on blank backgrounds.
Let’s go there!
Content Summary
- Plugins to put icons on the menu.
- At hand, the satisfaction of knowing what we are doing.
How to add Font Awesome icons to the WordPress Menu
#1. Plugins to put icons on the menu
It’s a free plugin that uses its own collection of icons.
Working of this plugin is very simple. When you are in the menu editor, we will see a new option called «Add Icon / Add Icon«. simply click on it and it will display your ‘Gallary’. Now, we have to choose the desired one that we want to use on the WordPress menu and that’s it.
However, there is not a big collection of icons. But still, you can use which you like.
b) WP Menu Icons
Similar to the previous one but with the advantage that, now we can select icons from the most popular sources:
- Elegant Icons
- Elusive Icons
- Font Awesome
- Icons Foundation
- Icons Themify Icons
c) Max Mega Menu
One of the most complete plugins. Replace the default menu with another 100% customizable.
Not only does it allow us to put icons, but it also, lets us put images, colors, fonts, customize the submenus columns, etc.
#2. At hand, the satisfaction of knowing what we are doing
There are many alternatives, but the most common, unless we know, are:
If you know any more worth adding to the list, let us know in the comments!
Just visit these websites one by one and navigate in its icon gallery and choose the icon you like the most. After that we must link the font to the installation of WordPress. Simply follow the step by step procedure given below:-
Once linked the source, or the sources (yes, you can use several!):
- Just look at the icon gallery, which ones you want to use and write its name. We are going to do this example with ‘Awesome Font’:
- After that, in WordPress, just go to the menu editor from the left bar: Appearance -> Menus
and here you have to put the code to call the icon:
-
- Good with the complete code:
-
- Well, here you have to enable the input CSS (if in your case, it is not visible, just look for the «Screen options» tab, at the top of the administrator, and activate it). Once visible, just put the name:
Keep in mind that each icon source has a different way of calling them:
-
- Fontello:
- Awesome Font:
- Ico Moon:
That’s it!