UI.X 2 2.2.15.0.2
- Thread starter ThemeHouse
- Start date
Dalton Prock
Well-known member
Yes, go ahead and untick that.
Dalton Prock
Well-known member
Hello, you are just gonna comment it out within the uix.less template. Look for the following code inside the template:
HTML:
.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" />}
Charlie J
Active member
Tyvm, so if I do so I can add my own icon via css? Or will it show via your [TH] Nodes ?
Dalton Prock
Well-known member
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.
Dalton Prock
Well-known member
Go ahead and create a ticket on this so that our team can investigate this further!
Charlie J
Active member
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
Well-known member
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
Active member
Dalton Prock
Well-known member
No no, just add it in the "" that folder was in.
Charlie J
Active member
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
Well-known member
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’m confused
It’s not on your UI.X Docs ;-; of course I would remove the code above for the folders. Then what?
Charlie J
Active member
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.
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
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
Active member
Thank you a lot, so I go to “Icons” within style properties? And add it where?
Charlie J
Active member
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..
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..
Last edited:
Lyndon Reynolds
Member
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.
Similar threads
