Docs

[helloeng]

Hi.

How can I add icons in front of my menu item titles? See screenshot.

Thanks!

[Lely]

Hi There,

Depending on the icon you want, you can add and update this:
<i class="x-icon x-icon-adjust" data-x-icon="" aria-hidden="true"></i>
Check this for options:theme.co/x/demo/integrity/1/shortcodes/icons/

Hope this helps.

[helloeng]

Hi

1. What is this symbol? 

2. Where exactly do I put this code?

[Friech]

Hi There,

#1 That is actually the icon, but not on fontAwesome font-family format. Please follow this post: https://community.theme.co/forums/topic/navbar-icon/#post-990901

#2 Paste it before your menu text navigation label.

Hope it helps, Cheers!

[helloeng]

Sorry I think I was not clear.

I understand how to insert an icon INSTEAD of a page name.

BUT I want an icon AND a page name. See new screenshot. Can you explain how to achieve this?

Thanks

[Rue Nel]

Hello There,

Please edit your menu item and use something like this:

<i class="x-icon x-icon-home" data-x-icon="" aria-hidden="true"></i> Home

You can get the uniform HTML entity or data-x-icon value for the corresponding icon from here:
http://fontawesome.bootstrapcheatsheets.com/

[helloeng]

That works. Thanks so much 😉

[helloeng]

follow up question

So, this code here:

<i class=”x-icon x-icon-home” data-x-icon=”” aria-hidden=”true”></i> Home

What would it change to if I wanted to use the font awesome icon “.fa-home”? icon AND Home (page name)?

Thanks

[Paul R]

Hi,

You can replace fa with x-icon

eg.

fa-home to x-icon-home

<i class="x-icon x-icon-home" data-x-icon="&#xf015;" aria-hidden="true"></i> Home

You can use this cheat sheet as your guide.

http://fontawesome.io/cheatsheet/

Hope that helps.

[helloeng]

Ok, now I understand.

Next question:

How could I use icons from this page with X theme?

http://www.flaticon.com/

I can download their icons in .zip files. How can I integrate them with X theme?

[Joao]

Hi There,

You can use them just like you use any image.

So you need to upload them via wordpress or ftp and have the URL of it.

Than you can use:<img src="http://yourwebsite.com/media/youricon.png" alt="Your Icon" height="42" width="42">

If you use in the menu it is the same principle: <img src="http://yourwebsite.com/media/youricon.png" alt="Your Icon" height="42" width="42"> Your Menu Text`

Hope that helps,

Joao

[helloeng]

Hi Joao, it worked. Thanks a lot. Issue resolved 😉

[Paul R]

You’re welcome! 🙂

[Author]

Posts