Custom Icons in the Nav Menu

[maxkatz]

I'm not sure then.. this is just a jQuery Mobile solution, nothing to do with Tiggzi. Maybe jQuery Mobile doesn't let you put such big icons.

[Barbara]

Ok I've found an example on the Jquery mobile site for using 3rd party icons. The page source is below. So I thought I would try adding this html into the footer div using a custom javascript at page load. But I can't get it working. What is the syntax for adding html.

I have tried Tiggr('mobilefooter1').html('');
and $('[name=mobilefooter1]').html('');
and $('[name=mobilefooter1]').append('');

but the html is not added

.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
#chat .ui-icon { background: url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
#email .ui-icon { background: url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; }
#login .ui-icon { background: url(glyphish-icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; }
#beer .ui-icon { background: url(glyphish-icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; }
#coffee .ui-icon { background: url(glyphish-icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; }
#skull .ui-icon { background: url(glyphish-icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; }

ul
lia href="#" rel="nofollow"Chat/a/li
lia href="#" rel="nofollow"Email/a/li
lia href="#" rel="nofollow"Danger/a/li
lia href="#" rel="nofollow"Beer/a/li
lia href="#" rel="nofollow"Coffee/a/li
/ul

[Barbara]

Ok I've found an example on the Jquery mobile site for using 3rd party icons.

http://jquerymobile.com/demos/1.1.0/d...

So I thought I would try adding the html from the page source for their example into the footer div using a custom javascript at page load. But I can't get it working. What is the syntax for adding html.

I have tried

Tiggr('mobilefooter1').html('');
and $('[name=mobilefooter1]').html('');
and $('[name=mobilefooter1]').append('');

but the html is not added

[Maryna Brodina]

Hello! Try to create Custom CSS and enter:

[dsid=mobilenavbaritem1] .ui-icon {
background: url("http://cdn3.iconfinder.com/data/icons...");
background-size: 30px 30px;
height: 30px !important;
margin-left: -15px !important;
width: 30px !important;
}

[Barbara]

That works great thanks. Is there a way to add a tooltip on hover so I can remove the text on the menuitem?

[Maryna Brodina]

It's possible to do with JS. Try to research how to do it. This can help:
http://jquerymobile.com/test/docs/pag...
http://www.sencha.com/forum/showthrea...
http://stackoverflow.com/questions/58...

[Mike4997955]

I tried to do this using the javascript above and the icon wasn't swapped. I have the correct button in the code, and i have the star selected in the editor, to be swapped. This is the code is loaded on page load, and this is the code i am using:

// same name as a name of item of navbar in 'Properties' tab
var item = $('[PicBar]');

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

// custom css for icon
var cssObj = {
'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 = $('')
$icon.css(cssObj);
item.find('span.ui-btn-inner').append($icon);
}

[Maryna Brodina]

Hello! Could you clarify what were you trying to do? If you want to make icons bigger-just create custom CSS (Project-- Create new-- CSS) and enter:

[dsid=mobilenavbaritem1] .ui-icon {
background: url("http://cdn3.iconfinder.com/data/icons...");
background-size: 30px 30px;
height: 30px !important;
margin-left: -15px !important;
width: 30px !important;
}

mobilenavbaritem1 - name of component in your App where you want to put icon

[Mike4997955]

I just want to add custom icons to the navigation bar menu. I created a custom CSS project from the example you gave and added the url for my icon. I still don't see my icon. I'm new to Tiggzi and programming, so i may have left out something simple. Do i need to activate the script from my app? How would i do that?

[Barbara]

Did you leave the default icons on the navbar items - you need to do this.

Did you add the css to your project - Create New - CSS