Use awesome font in submenu

Hello there,

For design purpose, it’s disabled by default with this code in the main theme’s stylesheet.

#mainnav .sub-menu li:before {
  content: '';
  margin: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

This line content: ''; overrides the icon of specified Font Awesome class name. You should ideally edit the style.css file and remove this line. However it’s prohibited as any modified lines will be wiped out when updating the theme.

For alternative solution, try doing the below steps:

1. Use either Code Snippets or Functionality plugin to add the below snippet:

function sydney_child_enable_icon_class_on_submenus( $atts, $item, $args, $depth ) {

	 if ( 0 !== $depth ) { // Check if it's sub menus
			$li_classes = $item->classes;
			$icon_class = $li_classes[0];
			$classHasFa	= strpos($icon_class, 'fa') !== false;
			if( $classHasFa ) {
				$atts['class'] = $icon_class;
			}
	 }

  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'sydney_child_enable_icon_class_on_submenus', 10, 4 );

2. Add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

#mainnav .sub-menu li a:before {
  font-family: Fontawesome;
  color: #fff;
  float: left;
  margin: 5px 5px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

Regards,
Kharis

Thanks,

It works. But on Mobile Devices I can’t see the icon. Only an Square with a X is display. On the mainmenu there where no icons displayed. Is it possible to disable the icons on mobile?

You can take a look the site with the workaround is now enabled.

Thanks.
Regards Lenschi

Hello there,

I am sorry, I found another little bug. Try replacing the snippet as mentioned in the first step with this one:

function sydney_child_enable_icon_class_on_submenus( $atts, $item, $args, $depth ) {

	$li_classes = $item->classes;
	$icon_class = $li_classes[0];
	$classHasFa	= strpos($icon_class, 'fa') !== false;
	if( $classHasFa ) {
		$atts['class'] = $icon_class;
	}

  return $atts;

}
add_filter( 'nav_menu_link_attributes', 'sydney_child_enable_icon_class_on_submenus', 10, 4 );

Remove the CSS code I suggested and use this one instead:

.mainnav .sub-menu li a:before,
#mainnav-mobi li a[class^="fa-"]:before {
  font-family: Fontawesome !important;
  color: #fff;
  float: left;
  margin: 5px 5px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

@media only screen and (min-width: 1025px) {

  .mainnav ul.menu > li > a[class^="fa-"]:before {
    display: none;
  }

}

Regards,
Kharis

Hello Kharis,

Thanks a lot. It works. You’r great.

Regards.
Lenschi