Docs

[Heath]

I am using Icon stack. Here is my website: http://c71.efe.myftpupload.com/

Here is how my navigation labels are: https://i.imgur.com/VOI2FLp.png
Here is the CSS I am using: https://i.imgur.com/rvZLVAH.png

I can’t figure out why they won’t display. Any help would be appreciated.

Thanks!

[Thai]

Hi There,

Please try with the following code instead:

<i class="x-icon x-icon-home" data-x-icon=""></i>
<i class="x-icon x-icon-gears" data-x-icon=""></i>
<i class="x-icon x-icon-chain-broken" data-x-icon=""></i>
<i class="x-icon x-icon-info-circle" data-x-icon=""></i>
<i class="x-icon x-icon-envelope" data-x-icon=""></i>

Hope it helps 🙂

[Heath]

That works, but I’m not sure why. Thank you for the help. I have not had to use data-x-icon=”” before… can you tell me why it works in this case? I have never heard of it.

Thanks again!

[John Ezra]

Hi there,

Thanks for updating the thread! The data-x-icon="" may look just like a square now but that is only because the code editor can’t render the icon. This is actually what shows the icon itself, meaning each of those squares in the CSS above are actually different icons.

Previously, we were just using codes like in the following format content="\fe09". This didn’t always work depending on the unicode format the site was using. By coming up with the data-x-icon we are able to somehow get around this issue.

Hope this helps clarify – thanks!

[Heath]

Hi, I would like to bump this thread for one additional question:

1. I would like to create a hover effect with the icons in the navbar: I would like the icons to be white, but black when I hover over them.
2. I would like to create a hover effect with the text in the navbar: I would like the text to be bold black when I hover over them.

Thank you for your help!

My website: http://c71.efe.myftpupload.com/

[Darshana]

@heath

You can add this under Custom > CSS in the Customizer.

#menu-primary-menu a:hover {
    background-color: #000000;
    font-weight: bold;
}

#menu-primary-menu a:hover i {
    color: #ffffff;
}

Hope that helps.

[Author]

Posts