Forum | Appery.io

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.

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?

Hello!

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

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

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.

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:

Hi Matt,

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

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.

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

Hello Ala'a

What exactly doesn't work?