Home>Support>Adding a menu icon to a custom menu link?

Adding a menu icon to a custom menu link?

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 11 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    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. 11 years, 1 month ago Dave LeBlanc

    Thank you for the help.

  3. 11 years, 1 month ago Dave LeBlanc

    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. 11 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    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. 11 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    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. 11 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    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. 11 years, 1 month ago Dave LeBlanc

    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. 11 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Super, glad we could help.

    You too!

  9. 10 years, 9 months ago Jeffrey

    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. 10 years, 8 months ago Tom How

    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. 10 years, 8 months ago Tom How

    Perfect thanks very much for the info

    • 10 years, 8 months ago Andrew Misplon
      Hi, I Work Here

      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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More