[dgibbons82Participant]

Good Afternoon!

I am creating a site now using the Icon 10 setup with the X Theme. (Great theme, by the way!) I have downloaded, installed, and activated the X child theme as well.

I am having some trouble getting my icons to appear in my primary menu (top nav bar). I am able to get the icons to work when I enter this HTML into the navigation label of the menu item:

<i class=”x-icon x-icon-facebook-square” data-x-icon=””></i>

But here is what is weird…

Suppose I want to have the “home” icon? I tried changing the section of the HTML code that says “facebook-square” to “home” but the facebook square icon still appears in the nav bar. I’m comfortable with adding the icons to the child theme (per the instructions in this forum: https://community.theme.co/forums/topic/adding-icons-to-the-nav-bar/), but is there currently a list that is already created that will let me copy and paste? There are a lot of icons, and I would like to get most of them loaded for use without having to manually enter each one. Otherwise, I’ll just add the ones I need into the child theme for now.

If I try to enter this HTML code: <i class=”x-icon x-icon-home”></i>
Then I only get a blank space next to the nav bar.

Any help is appreciated!!

[dgibbons82Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

To add home icon, add following code in navigation label :

<i class="x-icon-home" data-x-icon=""></i>

Please check this link to learn how you can add icons : https://theme.co/changelog/#theme-4-0-0

Hope that helps.

[dgibbons82Participant]

Thanks! That did it. My syntax must have been off a bit.

EDIT: It appears to have worked the first time I entered it. For example, I used what you gave me and it updated and added the home icon perfectly. Then, I switched the word home to “map” for another link (and then again to crosshairs for another nav bar link), but the home icon is the only one showing. This is kind of what was happening with the facebook icon I used as an example. Every icon after I add the first initial icon will just repeat that particular icon. Even if I change the words for the icon in the code.

[dgibbons82Participant]

Disregard my last statement. I figured it out by reviewing another thread.

For anyone else struggling with the same thing, here is what you need to do:

In the navigation label on your menu link, you need to have two things: The name of the icon you wish to use according to the font awesome library (ex: home), and the unicode value of the icon (ex: f015). You can get this by going to the link below, clicking on the icon you want, and the unicode value will be available on that page.

http://fortawesome.github.io/Font-Awesome/icons/

When entering the value, you must type it out as “& # x f015 ;” as the data value (just remove the spaces I purposely entered to avoid the value changing to a square). Here’s an example of what this looks like typed out:

<i class=”x-icon-home” data-x-icon=”& # x f015 ;”></i> (Once again, just remove my spaces in the data-x-icon value)

The square will replace your unicode value after you save the menu. This is why copying and pasting the same example data value continually added the home icon to every menu item for me.

I hope this helps someone else!!!

[JadeModerator]

Thanks a lot for sharing! 🙂

[Author]

Posts