Custom Icons in the Nav Menu

What are we going to build?

This example shows how to set custom icons on jQuery Mobile NavBar component.

Before you start

Tutorial level: advanced

Creating New Project

1. To start, we are going to create a new app. Enter app name and click Create.
2. Once the mobile editor loads, you should see something like this:
3. On the left-hand side click Pages > startScreen – editor with an empty startScreen will open:
4. From Components view drag and drop Navbar component. It should look like this:

Setting custom icon with JavaScript

1. Open Events view (on the bottom of the screen) > select startScreen >Load event > Run JavaScript
2. Enter the following code:

//'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 = "http://cdn3.iconfinder.com/data/icons/ellegant/64x64/9.png";
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);
}

3. Click Add event button
4. Test the App
   

Setting custom icon with CSS

1. Click Create New-> CSS
2. Enter the following:

[dsid=mobilenavbaritem4_5] .ui-icon {
background: url("http://cdn3.iconfinder.com/data/icons/ellegant/64x64/9.png");
background-size: 18px 18px;
}

[dsid=mobilenavbaritem4_5] - contains same name as name of item of Navbar in Properties.

3. Click Save button
4. Test the App
   

Example when using JavaScript and CSS