Custom Icons in the Nav Menu

[Igor]

Hi Jennifer,
It seems that you use separate navbar on every page with the same component name . It would be better if you use one template page with navbar element.
You could try to create empty project and test navbar icon on it. It will work for you.

[Matt6607699]

I used this CSS to add custom icons and it works well aside from one thing:

[dsid=connections_nav_button] .ui-icon{
background:url("../image/link_icon_grey.png")no-repeat transparent;
background-size: 40px 40px;
height: 40px;
margin-left: -15px !important;
width: 40px;
}

This will only work when a default icon is selected and the default icon still displays along with the new icon. Any idea on how to get rid of the defailt icon in the background?

[Maryna Brodina]

Hello!

Please take a look here http://docs.appery.io/tutorials/custo...

[Matt6607699]

Hi Maryna,
That link doesn't have anything different than what I have for the add via CSS section. Do I need to change the icons via JS on each page load?

The .png image that I am using has a transparent background so the old icon is showing through those spots. Can I get rid of the original icon all together?

Thanks for your help

[Kateryna Grynko]

Hi Matt,

You don't need to change icons on every page load (of course, if you don't want to do this). To remove a default icon select icon=none in Properties panel.

[Matt6607699]

If I select icon=none in the properties panel then the Navbar doesn't display any icon at all. My custom Icon will only display when a default icon is selected in the properties panel.

With icon=Star Selected:

With icon=None Selected:

[Kateryna Grynko]

Hi Matt,

If you want to change an icon only, replace:pre[dsid=mobilenavbaritem_10] .ui-icon/preWith:pre[dsid=mobilenavbaritem_10]:after/pre

[Matt6607699]

I tried that earlier without any luck, I changed the CSS on one Navbar Item as follows:

background:url("../image/link_icon_grey.png")no-repeat;
background-size: 40px 40px;
height: 40px;
margin-left: -15px !important;
width: 40px;
}

The results just makes my new custom Icon disappear.

[Ala'a Tounsi]

I trial max's steps,, and the tutorial as well and they didn't work with me

[Evgene Karachevtsev]

Hello Ala'a

What exactly doesn't work?