Using Font Icons
Introduction
We utilize the great work done by the guys at Font Awesome and GlyphIcon to provide you with access to over 900 icons along with support for FontAwesome effects including pulse and spin along with sizing and rotation options. In addition to this, you are able to use your own Custom HTML to put whatever you want in there such as images or shortcodes.
Full documentation for using Font Awesome icons can be found on their documentation pages here and for GlyphIcons you can find them here. If you would like to see a list of all the icons available you can also find those resources here (FontAwesome) and here (GlyphIcons).
When using font icons, you don’t need the `fa-` prefix on the icon name itself for FontAwesome or `glyphicon` for GlyphIcons as we handle all that for you. You will need it however for any effects, sizing or rotations added.
FontAwesome guide
Let’s start by creating a couple of Font Icons for our menu items. Out of the box the Responsive Menu for this site, without Font Icons looks like below:
Now, we do think the menu already looks beautiful as it is, but it could do with some “snazzying up” to really make it stand out from the crowd, that’s where Font Icons come in!
If you navigate to the Responsive Menu admin page and look under the Menu tab, the first option header is labeled Font Icons. Here you will see a section to add as many Font Icons as your heart desires. The default and empty option will look something like below:
In our example above we need to find some appropriate Font Icons to match the pages.
Time to head over to the Icons List at Font Awesome to search. Typing in the search term info provides us with the following results below:
I quite like the Font Icon with the `question-circle` above, so why not use that?
First, we need to click on the icon in the list which will take us to the `question-circle` page and give us further information about its usage. The page should look something like the below:
As we can see this icon is of the type Solid. We need to keep this in mind when adding it to our menu. Let’s add this to our Font Icon option in the Responsive Menu admin for our FAQ page as below:
As you can see all we have done is select the Menu Item FAQ, put question-circle inside the Icon column (remember the fa-prefix is not needed) and selected FontAwesome Strong (fas) from the Type drop-down selection.
Now we just need to hit the Update Options button and refresh our page on the front end. Once the page has reloaded we will now see that the Question Icon has been added next to our FAQ link.
But we don’t have to stop there. We can continue adding Font Icons for as many menu items as we want, in our example above we can fill out an icon for each menu item so the menu admin and front end looks beautiful.
This translates on the front end to (you can see that the sub-menu triggers and the sub-menu links themselves both have font icons associated with them):
I hope you agree with us that this is much more appealing and only took about 2 minutes work to setup!
Animations
Font Awesome Icons also support animations such as pulse and spin as well as icon rotations and image sizing. As Font Awesome Icons supports them, so do we.
Simply append your icon with the appropriate effect such as fa-spin to the end of the icon you chose. For example to make the user icon above for the Account page spin (silly idea we know!) then you would enter in the options box user fa-spin. A full breakdown of the effects and rotation options etc. can be found on the Font Awesome Examples page.
All of the above applies equally to any area where a Font Icon option is provided in the admin options area
GlyphIcons
The process for creating GlyphIcons font icons is 95% identical to the section on FontAwesome icons above so I will only talk about the differences here. To get a list of the currently available GlyphIcons you need to first navigate to this page here, which will look similar to what you see below:
Unfortunately, GlyphIcon doesn’t have a fancy search tool like FontAwesome does but once you find one you like you need to copy its reference name such as glyphicon glyphicon-music and strip out any mention of the word glyphicon. In the previous example that will simply leave us with music, this is all we need.
The second thing to remember of course is to change the drop-down to have GlyphIcon selected, an example selection of GlyphIcons setup can be seen below:
Custom
The custom option is literally for you to put whatever you please in there as any valid HTML will be accepted. The most obvious example and the largest use case is for custom images. Simply type in the html for your image and voila! it will show next to your menu item, a few examples of how this might be used can be seen below:
Mixing and matching
The last thing to note is that you can mix and match to your hearts content. You can have 5 FontAwesome icons, 12 GlyphIcons, and as many Custom icons as your heart desires! The only thing that will limit you is your imagination!