UI.X 2 [Paid] 2025-03-05

[Dalton Prock]

Possible that I'm able to add to navigation bar without it showing a folder icon? I wanted to use a custom one, even tried <i> in the name, and your [TH] Nodes plugin. Seems to not show my custom favicon but rather a folder icon.

Anyway to change this?

Hello, you are just gonna comment it out within the uix.less template. Look for the following code inside the template:

.p-nav, .uix_sidebarNav, .offCanvasMenu {
    .p-navEl-link, .offCanvasMenu-linkHolder > .offCanvasMenu-link:first-child {
        &:before {<xf:macro name="content" template="uix_icons.less" arg-icon="folder" />}

Comment out the "folder" or remove it.

 

[Charlie J]

Hello, you are just gonna comment it out within the uix.less template. Look for the following code inside the template:

.p-nav, .uix_sidebarNav, .offCanvasMenu {
    .p-navEl-link, .offCanvasMenu-linkHolder > .offCanvasMenu-link:first-child {
        &:before {<xf:macro name="content" template="uix_icons.less" arg-icon="folder" />}

Comment out the "folder" or remove it.

Tyvm, so if I do so I can add my own icon via css? Or will it show via your [TH] Nodes ?

 

[Dalton Prock]

Tyvm, so if I do so I can add my own icon via css? Or will it show via your [TH] Nodes ?

It shouldn't show on [TH] Nodes as it is set only to the navigation bar links. But yes you can set your own Material based icon on there.

 

[VG_AzR]

@Dalton Prock

May I have your help:

https://xenforo.com/community/threa...custom-icons-paid.137322/page-13#post-1256548

 

[Dalton Prock]

@Dalton Prock

May I have your help:

https://xenforo.com/community/threa...custom-icons-paid.137322/page-13#post-1256548

Go ahead and create a ticket on this so that our team can investigate this further!

 

[Charlie J]

It shouldn't show on [TH] Nodes as it is set only to the navigation bar links. But yes you can set your own Material based icon on there.

So lets say I do the above, I will then have no icon beside it.

How would I show my own icon there? That would show for both the mobile nav and desktop?

 

[Dalton Prock]

So lets say I do the above, I will then have no icon beside it.

How would I show my own icon there? That would show for both the mobile nav and desktop?

That is correct, you are able to add a custom Material based icon by adding the name of the icon.
IE: alarm, add, etc

 

[Charlie J]

O

That is correct, you are able to add a custom Material based icon by adding the name of the icon.
IE: alarm, add, etc

Oh I see ty, so I configure this with TH Nodes?

 

[Dalton Prock]

O


Oh I see ty, so I configure this with TH Nodes?

No no, just add it in the "" that folder was in.

 

[Charlie J]

No no, just add it in the "" that folder was in.

I’m confused so if I wanted to add a material icon to a node what are the steps?

It’s not on your UI.X Docs ;-; of course I would remove the code above for the folders. Then what?

 

[Dalton Prock]

I’m confused so if I wanted to add a material icon to a node what are the steps?

It’s not on your UI.X Docs ;-; of course I would remove the code above for the folders. Then what?

Forgive me as I thought you were asking how to add a custom icon to your custom navigation link. As far as it goes with adding a material icon to your nodes that is all explained in the [TH] Nodes documentation here.

 

[Charlie J]

Forgive me as I thought you were asking how to add a custom icon to your custom navigation link. As far as it goes with adding a material icon to your nodes that is all explained in the [TH] Nodes documentation here.

I meant how would I add a material icon to a node I added within the “public navigation”. Could you lead me step by step where I would go to add one? A material icon.

 

[VG_AzR]

To change the icons of the public navigation you can go through the style properties: icons.
To add the material icon to your node :

https://materialdesignicons.com/cdn/2.0.46/

You must use class : mdi mdi-name

Exemple : mdi mdi-account

 

[Charlie J]

To change the icons of the public navigation you can go through the style properties: icons.
To add the material icon to your node :

https://materialdesignicons.com/cdn/2.0.46/

You must use class : mdi mdi-name

Exemple : mdi mdi-account

Thank you a lot, so I go to “Icons” within style properties? And add it where?

 

[Charlie J]

Figured it, for those who may wish to:


A simple example, set that as the title within a "Public Navigation" tab

Tyvm @VG_AzR @Dalton Prock for your guidance

Edit:


Nvm shows odd..

 

[Lyndon Reynolds]

Figured it, for those who may wish to:

A simple example, set that as the title within a "Public Navigation" tab

Tyvm @VG_AzR @Dalton Prock for your guidance


Nvm shows odd..

Hi Charlie, I wanted the ability to customise my nav icons too, provided you have commented out the code Dalton told you to, the rest is easy.

Head into your navigation link that you want to customise, make sure it is a 'Basic' type, and make your changes to the ''Extra Attributes" section. Here's my store link for an example:



This should result in an icons that look like this:



Some community icons that are available on https://materialdesignicons.com/ may not appear and that's because an older version of the icon pack is selected.

• Make sure "Load Material Icons locally" is turned off in Style properties > Icons.
• Head into Templates, search for helper_js_global and make sure line 23 has the latest version number in the URL.
  • 
• The version number is normally given on their homepage in the first banner image.
  • 

 

[Dad.]

We will be adding official support eithin uix add-on soon, short term we will be adding a FAQ item to documentation in this next update.

 

[mkucuksari]

When do you think the new version 2.0.7 UI.X 2 will be released @Mike Creuzer , @Dalton Prock ?

 

[Charlie J]

Hi Charlie, I wanted the ability to customise my nav icons too, provided you have commented out the code Dalton told you to, the rest is easy.

Head into your navigation link that you want to customise, make sure it is a 'Basic' type, and make your changes to the ''Extra Attributes" section. Here's my store link for an example:

View attachment 176854

This should result in an icons that look like this:

View attachment 176855

Some community icons that are available on https://materialdesignicons.com/ may not appear and that's because an older version of the icon pack is selected.

• Make sure "Load Material Icons locally" is turned off in Style properties > Icons.
• Head into Templates, search for helper_js_global and make sure line 23 has the latest version number in the URL.
  • View attachment 176856
• The version number is normally given on their homepage in the first banner image.
  • View attachment 176857

Holy wow, thank you very very much! Highly appreciated.

We will be adding official support eithin uix add-on soon, short term we will be adding a FAQ item to documentation in this next update.

Are you guys able to let us specify the url for material icons version and font awesome?

 

[Charlie J]

Hi Charlie, I wanted the ability to customise my nav icons too, provided you have commented out the code Dalton told you to, the rest is easy.

Head into your navigation link that you want to customise, make sure it is a 'Basic' type, and make your changes to the ''Extra Attributes" section. Here's my store link for an example:

View attachment 176854

This should result in an icons that look like this:

View attachment 176855

Some community icons that are available on https://materialdesignicons.com/ may not appear and that's because an older version of the icon pack is selected.

• Make sure "Load Material Icons locally" is turned off in Style properties > Icons.
• Head into Templates, search for helper_js_global and make sure line 23 has the latest version number in the URL.
  • View attachment 176856
• The version number is normally given on their homepage in the first banner image.
  • View attachment 176857

EDIT: Seems to show on the mobile side bar, but doesn't show on the main navigation bar, bug?

Doesn't seem to load, eek.



Gavel, Trophy, Cart-Outline.

I disabled the local and used external.