This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Adding a menu icon to a custom menu link?

Resolved 14 replies premiumthemetheme-vantage
Dave LeBlanc
11 years ago · Last reply by Andrew Misplon 11 years ago

Can I add a menu font to a custom menu link similar to the home page menu font?

I want to add a custom menu link call Services and add a briefcase to the left of it. Can I add that through the menu under appearances or will that be a bit of custom css code?

Thanks for the help and I really like this Vantage theme.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

14
  1. Andrew Misplon Staff 11 years, 8 months ago

    Hi Dave

    Right now icons can only be added to menu items via the drop down menu on each page in the right column or in the case of the Home icon, Theme Settings > Navigation.

    In the case of a link you’ll need to do it with Custom CSS:

    .main-navigation ul li.menu-item-110 a:before {
	content: “\f0f2”;
	color: #CCCCCC;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	line-height: 0.5em;
	margin-right: 15px;    
}

    Just swap out “110” for whatever the list item (li) class is of the menu item. Also change #CCCCCC to the color of your icons if they aren’t that color.

  2. Dave LeBlanc 11 years, 8 months ago

    Thank you for the help.

  3. Dave LeBlanc 11 years, 8 months ago

    Andrew,

    The above CSS worked very well, but menu items underneath get to two icons, the suitcase and the one I chose on the page. Is there a way to turn it off so that the sub-menu items only show the menu icon I selected on the page on the right hand column?

    Sorry to be such a pest on this.

  4. Andrew Misplon Staff 11 years, 8 months ago

    No problem. Perhaps this?

    .main-navigation div > ul > li.menu-item-110 a:before {
	content: “\f0f2”;
	color: #CCCCCC;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	line-height: 0.5em;
	margin-right: 15px;    
}
  5. Andrew Misplon Staff 11 years, 8 months ago

    Ahh no that’s not correct. This works for me now:

    .main-navigation div > ul > li.menu-item-110 > a:before {
	content: “\f0f2”;
	color: #CCCCCC;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	line-height: 0.5em;
	margin-right: 15px;    
}
  6. Andrew Misplon Staff 11 years, 8 months ago

    If you’re keen to see what’s going on with “>” check out:

    http://learn.shayhowe.com/advanced-html-css/complex-selectors/
    Section: Direct Child Selector

  7. Dave LeBlanc 11 years, 8 months ago

    Perfect! Thanks for the prompt response and yes I am keen to see what’s going on with the “>”. Learned a bunch of new stuff here.

    Have good weekend, Andrew.

  8. Andrew Misplon Staff 11 years, 8 months ago

    Super, glad we could help.

    You too!

  9. Jeffrey 11 years, 5 months ago

    Thank you for your help with this concern. I’m using this edit myself, but I notice that the Font Awesome icon doesn’t appear when viewing the menu from a mobile device. I mean to say that the one menu item which is a link, which I have the custom CSS for, doesn’t have an icon when viewed on a mobile device. On a full desktop browser it works fine.

    Is there some extra custom CSS code to enter to ensure the FA icon is displayed when the responsive down-scaling kicks in?

  10. Tom How 11 years, 3 months ago

    Hi awesome theme I love it, this code does not seem to work anymore. Is there new code to add an icon to a menu link?

  11. Tom How 11 years, 3 months ago

    Perfect thanks very much for the info

    • Andrew Misplon Staff 11 years, 3 months ago

      For sure. Glad that helped.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread