Forum | Appery.io

I've just upgraded the libraries on my app from 1.0 to 3.1. Since doing this my icons no longer appear on the navbar. If I revert the libraries back to 1.0 the icons reappear.

I'm using a CSS to add icons to the navbar that looks like this:

[dsid=navbar_item1] .ui-icon { 
background: url("../image/red_cross40x40.png") no-repeat transparent; 
background-size: 40px 40px; 
height: 55px !important; 
margin-left: -20px !important; 
margin-top: 5px; 
width: 40px !important; 
} 

Can anyone suggest what I should do to make the icons appear under libraries 3.1?

Hello Gordon,

Appery.io improves it's components and templates in every library versions, so if you have stable app it is better do not change the version of the library. If it is necessary for you, you need review all you JS/CSS code.

Hello Sergiy,

Unfortunately my app was becoming unstable even though I had not changed it. It had started to crash on Android and was showing signs of trouble on iOS. I decided to upgrade the libraries to see if that eliminated stability issues and it did.

I'm am retesting the entire app right now. The library upgrade altered a lot of the cosmetics which I have largely fixed. I am working on verifying that the behind the scenes javascript still works. The missing navbar icons is a mystery I have not been able to solve. I was hoping that someone more experienced would have a quick fix...

This is NOT an answer to my problem. My app was no longer stable under libraries version 1.0. That is why I upgraded the libraries. Are you saying that custom icons on the navbar are impossible with more recent versions of the libraries?

The following has been given to me outside of this forum and solves the problem. It does not work under theme 'ios7', but I can live with that.

Here's the revised CSS:

/* .ui-icon class not available in jQuery Mobile 1.4? Select by dsid; you are using a different image for each one anyway
[dsid=navbar_item1] .ui-icon {
*/
[dsid=navbar_item1]:after {
background: url("../image/red_cross40x40.png") no-repeat transparent;
background-size: 40px 40px;
height: 55px !important;
margin-left: -20px !important;
margin-top: 5px;
width: 40px !important;
}