Forum | Appery.io

I tried to use below code to use custom icon for navbar but it shows two icon ,the default star is background of my custom icon

var image="files/views/assets/image/register.png";
//'mobilenavbaritem4_4' is a same name as a name of item of navbar in 'Properties' tab
var item = $('[name=contactus]');

// URL to image for icon
//var image = "http://cdn3.iconfinder.com/data/icons...";

var cssObj = {// custom css for icon
'background': 'url("'+image+'") no-repeat transparent',
'background-size':'18px 18px',
'border-radius': '0px'
};
if (item.find('span.ui-icon').size()){
item.find('span.ui-icon').css(cssObj);
}else{
var $icon = $('span/span');
$icon.css(cssObj);
item.find('span.ui-btn-inner').append($icon);
}

Hello! Could you clarify what is your Libraries version? Please try to delete icon from NavBar item.

Any solution for this?

I am running V1.2 but have also tried V1.1 and V2.0.

I have more details at the bottom of this thread:
a rel="nofollow"https://getsatisfaction.com/apperyio/to ... nav_menu/a

Hello,

This works for me, no default icon is shown on background.
precode
//'mobilenavbaritem4_4' is a same name as a name of item of navbar in 'Properties' tab
var item = $('[name=mobilenavbaritem4_4]');

// URL to image for icon
var image = "files/views/assets/image/my_icon.png&quot

var cssObj = {// custom css for icon
'background': 'url("'+image+'") no-repeat transparent',
'background-size':'18px 18px',
'border-radius': '0px'
};
if (item.find('span.ui-icon').size()){
item.find('span.ui-icon').css(cssObj);
}else{
var $icon = $('<span></span>');
$icon&#46;css(cssObj);
item&#46;find('span&#46;ui-btn-inner')&#46;append($icon);
}/code/pre

I ran your code:
//'mobilenavbaritem4_4' is a same name as a name of item of navbar in 'Properties' tab
var item = $('[name=home_nav_button]');
// URL to image for icon
var image = "files/views/assets/image/Home_icon_grey.png";
var cssObj = {// custom css for icon
'background': 'url("'+image+'") no-repeat transparent',
'background-size':'40px 40px',
'border-radius': '0px'
};

The target is the right nav button.

If I entered it right, that code doesn't seem to work for me.
I shared the app, DejaWho, page="Connection search".
Connection_search page is where I added your JS on load.

The default icon displaying in the background of the custom icon and the custom icon not displaying when Icon=none seems to be a bug with the ios7 theme.
I got the idea to try a different theme from:
a rel="nofollow"https://getsatisfaction.com/apperyio/to ... n_navbar/a

The CSS works fine accept for in the ios7 theme

Hi Matt,

We have checked your app on "Connection search" page. And it seem to be Ok. http://prntscr.com/3bxlzv/direct

Glad you have found a solution.

Regards & thanks for your update.

Hi,
I tried to change the custom button icon (theme ios7), it work fine on other theme,

I have this code on CSS asset

code
.myButtonWithphone .ui-icon.ui-icon-plus{
background-image: url(../../../../files/views/assets/image/phone.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-border-radius: 4;
background-size: contain;
}

code

But as you can see in the image, the minus sign is on the background. How to remove this from the button?

Regards /code/code

Hi Alex.

Please add to your CSS following style:

pre
code

color: transparent;

/code
/pre

Regards.

Hi,

Im using this code on one app, and works fine. Now I created a new app, and tried to use the same CSS code to replace the icon on the button, but it isnt working...

Im using library version 2.0
and ios theme

any suggestion?

Regards