Font Awesome
Max Mega Menu supports both Font Awesome 4 and Font Awesome 5.
To add a Font Awesome icon to a menu item, open the Mega Menu settings for the menu item and click the ‘Menu Icon’ tab. You will see a list of available icon types listed across the top of the page. Select ‘Font Awesome’ then select the icon you would like to use.
Font Awesome
Troubleshooting
If the icons are not appearing on the front end, go to Mega Menu > Tools and clear the CSS cache (you will only need to do this once).
Equal Width Icons
Font Awesome icons are output at varying widths depending on the icon chosen. When displaying icons next to menu items in a vertical list, the varying with of the icons can make the menu item text appear as if it is not lined up correctly. To set a fixed width on the icons, go to Mega Menu > Menu Themes > Custom Styling and add the following:
|
1 2 3 4 |
#{$wrap} #{$menu} ul.mega-sub-menu li.mega-menu-item a[class^='fa']:before { width: 1.25em; text-align: center; } |
Dequeueing Styles
Max Mega Menu will automatically include the required Font Awesome CSS on your site. If your theme already uses Font Awesome, you can stop Max Mega Menu from outputting a duplicate copy of the CSS. Go to Mega Menu > General Settings and uncheck the relevant “Font Awesome” option:
Using Font Awesome 5 for your sub menu arrow indicators
Add the following to your child themes functions.php file:
|
1 2 3 4 5 6 7 8 9 10 |
function megamenu_use_fontawesome_arrows( $vars, $location, $theme, $menu_id, $theme_id ) { $vars['arrow_font'] = "'Font Awesome 5 Free'"; $vars['arrow_font_weight'] = "900"; $vars['arrow_up'] = "'\\f106'"; $vars['arrow_down'] = "'\\f107'"; $vars['arrow_left'] = "'\\f104'"; $vars['arrow_right'] = "'\\f105'"; return $vars; } add_filter( "megamenu_scss_variables", "megamenu_use_fontawesome_arrows", 10, 5 ); |
After adding the code, go to Mega Menu > Tools and clear the CSS cache.
Using Font Awesome 5 Pro
Requires Max Mega Menu Pro v2.3+
You will need your own Font Awesome Pro subscription and you must use the official Font Awesome plugin with the following settings:
If you are hosting Font Awesome Pro 5 locally, add the following to your wp-config.php file instead:
|
1 |
define('MEGAMENU_PRO_USE_FONTAWESOME5_PRO', true); |
After enabling Font Awesome 5 Pro using either of the above methods, go to Mega Menu > Tools and Clear the CSS Cache. This will update the font-family rules to reference Font Awesome 5 Pro.
Adding Font Awesome 5 Pro Icons to the picker
To add Pro icons to the picker, find the icon you want to add in the icon directory and copy the unicode and css class.
Add the following to your functions.php file, following the same format for your selected icons:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function megamenu_add_fontawesome_pro_icons($icons) { // solid icons (fas) $icons["fas-f6ae"] = "fas fa-acorn"; $icons["fas-f6b0"] = "fas fa-alicorn"; // light icons (fal) $icons["fal-f6ae"] = "fal fa-acorn"; // regular icons (far) $icons["far-f648"] = "far fa-bullseye-arrow"; return $icons; } add_filter("megamenu_fontawesome_5_icons", "megamenu_add_fontawesome_pro_icons"); |
Your new icons will appear at the end of the list of Font Awesome 5 icons:
Like what you see? This functionality is available in Max Mega Menu Pro