Using Font Icons [V4]

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:

title font icon

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:

title font icon before

This is what you see after setting up a Title Icon, here we have set up a FontAwesome Solid fan:

title font icon after

 

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:

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:

Toggle Button 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:

Active Font Icon

This is what you see after setting up a Toggle Button Active Font Icon, here we have set up a Glyphicon- refresh Icon:

Active Font Icon - glyphicon-refresh

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:

Item Icon - Before

This is what you see after setting up an Item Icon, you can see an Icon beside every Item:

Menu Styling -item Icons

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:

title font icon before

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:

Trigger Icon Bitcoin


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:

Trigger Active Font Icon

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:

Trigger Active Font Icon- Dizzy Face