Forum | Appery.io

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

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.

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.

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-...

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

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

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?

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?

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

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