How to add icons above menu items ?

Hey mborel,
Sorry for the late reply, you can get the codes for your icons by using the shortcode wand

Then for each icon menu item please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#menu-item-115::before {
  content: "\e808";
  font-family: entypo-fontello;
  font-size: 40px;
  position: relative;
  display: inline-block;
}
#menu-item-115 a {
  height: 20px !important; 
  line-height: 20px !important;
  padding-left: 0px;
}

This code is for your first item “menu-item-115”, so just copy this code a adjust the menu IDs and the icons.

Best regards,
Mike

Hi,
Are you going to add a icon to every menu item, or just some?

Best regards,
Mike

Hi,
Thank you for your feedback, lets try something different, using the shortcode wand get the shortcode for a icon like this:

[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='center' color='' link='' linktarget='' animation='' id='' custom_class='' av_uid='' admin_preview_bg=''][/av_font_icon]

and enter it into a menu “Navigation Label” replacing the menu title like this:

Then assuming this is #menu-item-3274 we will add this Quick CSS to add the title under the icon:

#menu-item-3274 span.av-icon-char::after {
  content: "Home";
  font-size: 10px !important;
  display: block;
  line-height: 1px;
}

#menu-item-3274 > a > span.avia-menu-text > span {
   line-height: 40px;
}

Since your menu is much larger the css may be a little different, can you include an admin login so we can adjust this for your site?

Best regards,
Mike

Hi,
Sorry for the late reply, I adjusted the height of the sub-menu and the icon and menu title so they are all just about on the same line. It may be down just a little but once all of the menu items have the icon they will look the same.
Please clear your browser cache and check.
Here is the css used:

#menu-item-115 span.av-icon-char::after {
  content: "Accueil";
  font-size: 15px !important;
  display: block;
  line-height: 40px;
    top: 100px !important;
    position: absolute;
}
#menu-item-115 > a {
	height: 215px;
    line-height: 215px;
}
#menu-item-115 > a > span.avia-menu-text > span {
    line-height: 215px;
}

Best regards,
Mike