-
Posts
-
Following on from this closed thread
https://community.theme.co/forums/topic/icon-typehome-instead-of-home-in-main-menu/#post-33730
I am trying to place different icons in each menu item but it is still showing the same one (home icon)
Is there a way to recreate it like the demo with different icons?
The method shown in the last thread does not work.
Hi There,
You can copy the HTML code of the icons then insert to the menu items label:
<i class="x-icon x-icon-home" data-x-icon="ο" aria-hidden="true"></i>Hope it helps π
Hi That does work to insert the icon into menu but all the icons are the same as the first one? So if say you have
<i class=”x-icon x-icon-home” data-x-icon=”ο” aria-hidden=”true”></i> Home
<i class=”x-icon x-icon-users” data-x-icon=”ο” aria-hidden=”true”></i> Why Us?
<i class=”x-icon x-icon-bullhorn” data-x-icon=”ο” aria-hidden=”true”></i>Book
<i class=”x-icon x-icon-mobile” data-x-icon=”ο” aria-hidden=”true”></i> Contact
Then they all just have the Home icon inserted (you can see on my screen grab).
I don’t see how to make all the icons different?
Thanks
Hi There,
Each icon has a unique data-x-icon.
Please try with this:
<i class="x-icon x-icon-home" data-x-icon="ο" aria-hidden="true"></i> <i class="x-icon x-icon-users" data-x-icon="ο" aria-hidden="true"></i> <i class="x-icon x-icon-bullhorn" data-x-icon="ο‘" aria-hidden="true"></i> <i class="x-icon x-icon-mobile" data-x-icon="ο" aria-hidden="true"></i>Hope it helps π
Hi there
I, unfortunately didn’t understand that as it looks the same as what I posted above (to me anyway!) but I did get it to work by going into ‘Page Source’ in Safari and copying the code of your demo from there into the Navigation Label box. Not sure if I can later the icons to different ones yet (will try) but at least I have 3 unique ones.
Therefore it may simply be to do with the copying and pasting formatting within Safari (which I’m using) or something like that.
Can happily close this topic now π
Hi
Before this post is closed, and just to help other users struggling with this same problem, I eventually worked out that you can always make this work by using codes from the Font Awesome cheat sheet with the right suffix etc
http://fontawesome.io/cheatsheet/
Therefore if you want to add an icon into your menu simply write it like this in the ‘Navigation Label’
<i class=”x-icon x-icon-envelope” data-x-icon=””></i> Envelope
I have found that this works as you need the exact code in the data-x-icon=”” part section, as mentioned elsewhere in this forum and not simply a blank space.
Weirdly the forum seems to have removed the code when I posted that above reply (sure there’s a good reason for that!).
Therefore do it like this
<i class=βx-icon x-icon-envelopeβ data-x-icon=”[code]β></i> Envelope
Where the [code] part is the reference from the cheatsheet including the suffix and trailing semicolon.
Hi There,
You can find the correct codes by inspecting the Icons on this page.
Click with your right mouse button click inspect, If you dont feel comfortable doing that let us know what icons you want to use and we will provide a solution.
The Icons provided by Thai should work. It might look the same but the computers can read differently those little squares.
Another alternative would be to use this codes as follow:
When you change the name of the icon, you also need to change the data-x-icon.
For example, if you have x-icon-facebook-square the data-x-icon would be
If you use x-icon-user, the data-x-icon should also be changed to For data-x-icon (Unicode HTML entity) reference, please check it out here:
http://fontawesome.bootstrapcheatsheets.com/Hope this helps. Please let us know how it goes.
- <script> jQuery(function($){ $("#no-reply-1115376 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
