Documentation

Adding font awesome icons into menu

How to Font Awesome icons in the main menu

In Helix Framework we were fully integrated Font Awesome, which gives you scalable vector icons instead of standard graphic icons that can instantly be customized. You can optimize the various parameters of your icons with FA such as changing the font size, icon size, colors, margins, shadow, and anything that can be done with the power of Cascading Style Sheet (CSS). With over 360+ icons to choose from, the Font Awesome system is the perfect solution for todays web developers.

Helix Framework II and III uses current version (v4.0+) of the Font Awesome collection set, you can check used version under following path of your installation: plugins/system/helix/css/font-awesome.css inside file content header. In following steps we will show you how to add FA icons into any menu (also MegaMenu) for JoomShaper Joomla 3 templates:

Step 1: Go to Menu Manager and choose menu item where you want to add FA icon.

Step 2: Then choose "Helix Mega Menu Options" tab and inside "Add Custom Class" input field add your own class, for example "envelope".

add-custom-font-awesome-class

Step 3: Now choose your favorite icon, you can view examples all 360+ of the Font Awesome icons and use this as a reference. We will use icon on menu by using css before or after property method. Please notice that not all icons might be implement because Font Awesome collection is still growing. Please open following file: plugins/system/helix/css/font-awesome.css - and find unicode of necessery icon.

envelope-unicode-icon

Step 4: Now inside custom css file (check this guide) please add following css code:

a.menu-item.envelope:before {
  content: "\f003";
  font-family: FontAwesome;
  padding-right: 5px;
  font-style: normal;
  font-weight: normal;
-webkit-font-smoothing:antialiased; }

Upload or save changed file – that’s all that’s required. Refresh your page, after few seconds you should see an icon from Font Awesome near your menu item.

icon-menu-mega Font Awesome how to add

Newsletter