Docs

[Gnomo Bàgnolo]

Hi
As suggested for Icons on the new X v4 and CS, for we can use

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

But I would like to undestand if have to use a specific value for “x-icon-HOME, because it always seems to take the prevalence value of unicode

Thank You

[Jade]

Hi there,

Unfortunately, I am not certain about your question. Would you mind clarifying? Are you trying to use a different icon to replace the home icon?

Thank you.

[Gnomo Bàgnolo]

Sorry

As suggested in your POST
https://community.theme.co/forums/topic/x-4-icons-on-menu-items/
If I would like to use icons from page
http://fontawesome.io/cheatsheet/
I can use the suggested CODE

But i cannot undestand if I have to use a specific value for “x-icon-HOME“, or I it is indifferent due to followinf UNICODE value

Thank You

[Rupok]

Hi there,

Thanks for writing back. Well, it should be like :

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

Here x-icon class is necessary to get proper styling, line height etc.

Also the class And x-icon-home is really important to inherit some style like this :

[class*="x-icon-"]::before {
  content: attr(data-x-icon);
  line-height: 1;
}

As you can see the styling will be applied for the classes like And x-icon-home or x-icon-phone and so on.

So without the classes, your icon will be shown but you will miss the proper styling from X.

Hope this explains better.

Cheers!

[Gnomo Bàgnolo]

Hi there

But if o write x-icon-homeor x-icon-phone before data-x-icon=”UNICODE” is indifferent?

Thank You

[Joao]

Yes it is indifferent,

You need to have the proper one, it may look the same for the human eye but the computer see the difference.

You can find the proper codes by accessing: http://demo.theme.co/integrity-1/shortcodes/icons/ and inspecting the icons with the right button of your mouse than copying the html code.

If you don´t know how to do that, let us know which Icons you would like to use and we will provide you the full html code.

Hope that helps

Joao

[Gnomo Bàgnolo]

Hi

One of the icons I would like to use, for example, is:

TripAdvisor:
<i class="x-icon x-icon-home" data-x-icon="& # x f 2 6 2 ;"></i>

Because I do not find the proper “TripAdvisor” code by accessing: http://demo.theme.co/integrity-1/shortcodes/icons/ can I use another one like “home” or I have to use anyway “tripadvisor”?

<i class="x-icon x-icon-tripadvisor" data-x-icon="& # x f 2 6 2 ;"></i>

Thank You

[Paul R]

Hi,

You can check other icons on the link below.

http://fontawesome.io/cheatsheet/

You just need to change the data-x-icon and name.

Hope that helps

[Author]

Posts