Using Font Icons [V4]
Table of Contents
Introduction
We utilize the great work done by the guys at Font Awesome and GlyphIcon to provide you with access to over 900+ icons. 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).
Other than that we also use icon pack from Dashicons and Material Icons(mdi) in order to make the menu look beautiful.
Font Icons Can be set as:
- Title Icon in Mobile Menu Container
- Path: Mobile Menu > Container > Title > Contents > Set Font
- Toggle Button Icon in Mobile Menu
- Path: Mobile Menu > Toggle Button > Button Type > Icon > Font Icon
- Path: Mobile Menu > Toggle Button > Button Type > Icon > Active Font Icon
- Item Icon in Menu Styling
- Path: Menu Styling > Item Icon
- Trigger Icon in Menu Styling
- Path: Menu Styling > Trigger Icon > Icon
Setting Up Title Icon
There are numerous icons available from various providers when you navigate to Mobile Menu > Container > Title > Contents > Set Font you will see something like below:
You can choose the required icon as the Title Icon and hit the Select Button.
This is what you see before setting up a Title Icon:
This is what you see after setting up a Title Icon, here we have set up a FontAwesome Solid fan:
Toggle Button Icon in Mobile Menu
To Set up Toggle Button Icon you need to navigate to Mobile Menu > Toggle Button > Button Type > Icon
This is what you see before setting up a Toggle Button Icon, it is a normal 3 line hamburger icon:
This is what you see after setting up a Toggle Button Icon, here we have set up a FontAwesome Brand – WordPress Simple Icon:
To Set up Toggle Button Active Font Icon you need to navigate to Mobile Menu > Toggle Button > Button Type > Icon > Active Font Icon
This is what you see before setting up a Toggle Button Active Font Icon, it is a normal 3 line hamburger icon that changes to a cross:
This is what you see after setting up a Toggle Button Active Font Icon, here we have set up a Glyphicon- refresh Icon:
Item Icon in Menu Styling
To Set up Item Icon you need to navigate to Menu Styling > Item Icon
This is what you see before setting up an Item Icon, basically there are no icons beside the item name:
This is what you see after setting up an Item Icon, you can see an Icon beside every Item:
Trigger Icon in Menu Styling
To Set up Trigger Font Icon you need to navigate to Menu Styling > Trigger Icon > Icon > Font Icon
This is what you see before setting up a Trigger Icon, basically there are default downward arrows in place:
This is what you see after setting up the Trigger Icon, you can see and the downward arrow has now been replaced by a bitcoin icon from FontAwesome Brand:
To Set up Trigger Active Font Icon you need to navigate to Menu Styling > Trigger Icon > Icon > Active Font Icon
This is what you see before setting up a Trigger Icon, basically there are default upward arrows in place:
This is what you see after setting up the Trigger Active Font Icon, you can see and the upward arrow has now been replaced by a dizzy face icon:
