Add Icons to Menu

Support
#1

Hi, I think this should be pretty simple, but can’t find instructions on how to add icons to my header menu. I want to assign icons to each menu link just like the icon 10 demo example: http://demo.theme.co/icon-10/

Please let me know where I can find instructions for doing this…

#2

If you are using pro, you can follow this tutorial here https://www.youtube.com/watch?v=MMh4HUlE9Qc

#3

Thank you, but I’m not using Pro. I would like instructions for adding icons with X.

#4

Hi There,

You need to add the icon code on the Navigation Label together with the actual menu text/name navigation.

e.g.
<i class="x-icon x-icon-heart" data-x-icon="&#xf004;" ></i>

On the data-x-icon attribute you need to supply the icon unicode

Look for your desired icon unicode here.

Let us know how it goes,
Cheers!

2 Likes
#5

This worked great! Thank you! I have another question. Is there a way to make custom icons to use? Aside from just using an image? I’d like to create my own icons and still have the hover effect work.

#6

Hi There,

If that is the case then use this HTML markup as your Navigation Label instead.

<img src="IMAGE URL HERE" />

Make sure your image is relatively small.

You can not add your own icon on the FontAwesome

Thanks,

#7

hi there,
also x. is there a “hack” to show the icon only on rollover and active? thanks a lot! kai

#8

Hi @iTurtle,

Thanks for writing in! It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#9

thanks a lot @Nabeel ! maybe you can extend x in the future with such a menu. or is it possible with pro already?

#10

Hi again,

Due to WordPress menu structure limitations it would become hard to achieve the effect you desire however there is a work around that you can try:

.x-navbar .desktop .x-nav > li > a > span {
    position: relative !important;
}
.x-navbar .desktop .x-nav > li:hover > a > span i {
    position: absolute;
    width: 100%;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
}

However this may not work as expected but you can give this a try.

Hope this helps!

#11

hi Nabeel, thanks a lot for your help! it makes my menu look really funny but i will try and customise it further :wink:
does pro offer more features regarding the look and function of the menu or is it “only” about the header and footer so far? thanks again! kai

ps: i just now see that the new forum allows the thread being saved with! the css snippets provided. that is great news!!! (that was not possible in the old forum and a constant problem for me)

#12

Hi again,

You can try replacing your code with this one instead:

.x-navbar .desktop .x-nav > li > a > span {
    position: relative !important;
}
.x-navbar .desktop .x-nav > li:hover > a > span i {
    position: absolute;
    width: 100%;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    left:0;
}

Pro is the most advanced Website Creator for WordPress, with pro you can almost create anything, see it in action here https://theme.co/pro/

Hope this helps!

#13

thanks again!
the code ist still doing funny stuff :wink:
my goal is to have the normal menu buttons and only on rollover a fontawesome icon shown on the left side of the button name.
i tried it out in pro and that works fine! pros header builder is really amazing! but i must admit that i don’t use pro if not really necessary because of the extra time i need to configure the header. usually the options of x are sufficient for my projects. the extra time i need to configure a decent header in pro (responsive options etc.) would add too much to the cost for the whole website. but now i learned that the header builder is also a menu builder - and that might be the reason to use pro more often in future for me.
thanks again! all the best - kai

#14

You’re most welcome. glad we could help.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.