Docs

[ajeshabraham]

I tried to put

<i class=”x-icon x-icon-adjust” data-x-icon=””></i> About

in Navigation label. But this is not displaying the icon for some reason.

[Lely]

Hi There,

Please try this instead:
<i class="x-icon x-icon-adjust" data-x-icon="" aria-hidden="true"></i>

Hope this helps.

[ajeshabraham]

Thanks. It helped.
Just out of curiosity – why the code is working in some menu items without the aria-hidden=”true” and is not in this case?

Regards
Ajesh

[John Ezra]

Hi Ajesh,

Thanks for updating the thread! It may just be that something was conflicting for the specific menu item. Thanks!

[ajeshabraham]

I have tried to add another menu item
<i class=”x-icon x-icon-info-circle” data-x-icon=”” aria-hidden=”true”></i> Student Info

But this time it is coming displaying the adjust icon instead

[Friech]

Hi There,

Can you confirm that your X|Theme and Cornerstone is on the latest versions? (X 4.4.2 and Cornerstone 1.2.4)

The tags below works on my dev site, if this does not work on your end please provide us login credentials in private reply so we can take a closer look.

<i class="x-icon x-icon-adjust"></i>
<i class="x-icon x-icon-user"></i>
<i class="x-icon-facebook"></i>

Hope it helps, Cheers!

[ajeshabraham]

This reply has been marked as private.

[Joao]

Hi Ajesh,

Please turn off Wordfence so we can check your website.

I tried to access it but I got blocked.

Please see img attached.

Thanks,

Joao

[ajeshabraham]

Hi Wordfence is turned off.

[Friech]

Hi There,

Thanks, so the issue is the site is not requesting the x-fa-icon-classes-css, that is why we can’t use the classes.

Lets utilize the data-x-icon instead, the code is like this.

<i class="x-icon" data-x-icon="&#xf003;"></i>
<i class="x-icon" data-x-icon="&#xf133;"></i>

To use other icons please refer here: http://fontawesome.io/icons/

Look for the icon unicode

The data-x-icon value should be:

data-x-icon="&#xUNICODE;"

Where the UNICODE is the actual icon code.

After you save the menu the data-x-icon value will change to some kind of square character, but will show the icon on the from end.

Hope it helps, Cheers!

[ajeshabraham]

Thanks
It is working now.
Could you elaborate the issue:
“so the issue is the site is not requesting the x-fa-icon-classes-css, that is why we can’t use the classes.”

[Paul R]

Hi,

Sorry for the confusion. Classes no longer works. We changed it in v4.0

We’ve updated the way in which Font Awesome icons are output to the page (doing so we were able to eliminate 20% of our overhead from our stylesheets). Selecting this option will simply bring back the old CSS font classes if desired (e.g. “x-icon-home,” et cetera). For the most part, this stylesheet is not needed and you can proceed safely without it; however, if you’ve handwritten any icons into your page such as in the menu or elsewhere, you may want to leave this on so icons don’t mysteriously “disappear,” but we do recommend that user update to our new method of outputting icons for a more streamlined approach.

[ajeshabraham]

Thanks for clarifying.
Can you please have a look at this issue/
Screenshot attached. There is a border coming up when you click on a button or the items in navbar and then moves the cursor away.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
    outline: none !important;
}

Let us know how this goes!

[ajeshabraham]

This has fixed the issue. But its strange that such an issue exists and that you to put custom css to fix it. It happened in my another site using x theme .. servi.com.au. put the same code and fixed it.

[Author]

Posts