Custom Icons in the Nav Menu

[Ron]

This builder is awesome. The only quip I have is not being able to add custom icons to the nav bar menu. It's really common on most other apps. I saw somewhere here that it was under consideration. Is this going to happen? If so when? and if not is there a work around?

Thx
Ron
a href="mailto:rdean@communitywarvets.org" rel="nofollow"rdean@communitywarvets.org/a

[maxkatz]

It can be done with JavaScript, we will add this feature to our builder. I'll try to post an example of how it's one with JavaScript.

[anilsojitra]

I too am interested in being able to add custom icons to a navbar component. I would also be grateful if you could post an example of how to do this with javascript.

[maxkatz]

Setting custom icon with JavaScript. You would run this script on page load.
code
//'mobilenavbaritem2' is a same name as a name of item of navbar in 'Properties' tab
var item = $('[name=mobilenavbaritem2]');

// URL to image for icon
var image = "http://cdn3.iconfinder.com/data/icons/ellegant/64x64/9.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 class="ui-icon ui-icon-star ui-icon-shadow"><&#47;span>')
$icon&#46;css(cssObj);
item&#46;find('span&#46;ui-btn-inner')&#46;append($icon);
}
/code

Example when using JavaScript:
http://tiggzi.com/view/ee26a0e7-303e-...

Setting custom icon with CSS (Project Create New... CSS).
code
a[name='mobilenavbaritem2'] &#46;ui-icon-alert {
background: url("http:&#47;&#47;cdn3&#46;iconfinder&#46;com&#47;data&#47;icons&#47;ellegant&#47;64x64&#47;9&#46;png") no-repeat transparent;
background-size:18px 18px;
border-radius: 0px;
}
/code

a[name='mobilenavbaritem2'] contains same name as name of item of navbar in 'Properties' tab.

.ui-icon-alert is a type of icon that should be replaced. You need to set the actual icon in editor first.

Example using CSS:
http://tiggzi.com/view/ee26a0e7-303e-...

[Allan Schougaard]

How do you access images that are uploaded to Tiggzi? Images that you put in with the Image widget in the Palette?

[Maryna Brodina]

Hello Allan! If I understand you correctly you are trying to get an access to images uploaded to Image Assets, please try to do next steps:
1) Add images to assets;
2) Add image component on mobilescreen and select uploaded image;
3) Open projeect in preview, select image and open it in new browser tab - you'll see URL (something like this http://project.tiggzi.com/views/207a4...)
Let me know if I'm wrong and you have some other question

[Barbara]

I have tried this example, my icons are 48px x 48px, but they are showing up really small, how can I make them full size?

[Barbara]

I have tried this example using javascript, my icons are 48px x 48px, but they are showing up really small, how can I make them full size?

Also how could a add a tooltip to the icon as I don't want any text?

[maxkatz]

The background is set to 18x18 in the example. You can try changing that.

[Barbara]

I tried changing the background size and that didn't work. I only see part of the icons