Forum | Appery.io

I want to use custom icons in my app but it not showing in test view.

I have established the following classes name in the right panel of the screen:
menubutton ui-btn-icon-left ui-icon-my_home

And this is my custom CSS:
.ui-icon-my_home:after {
background-image: url('../image/icon-home.png');
background-repeat: no-repeat;
background-size: contain !important;
}

Buttons' appearance is this in design view:

But when I test my app I have this:

How can I solve this issue?

Hello Angel,

Please add 'weight' to your rules. Also as an option you may use an image as a button, maybe this will be easier in your case.

Hello Evgene,

Does exists any CSS rule called "weight" or are you refering to font-weight? I don't see this rule.

Thanks.

Hello guys,

Same issue here: the custom icon appears properly in the visual app builder, but I still see the "standard" icon when running the app (both on the computer and on the phone). Is there any quick fix?

Thanks!
john

Hello John,

Please clarify, do you use some CSS rules to show custom icons? Please show us the code in this case.

Hi Evgene,

yes, I am using the following CSS rule on button class "alohaBtn":

.alohaBtn.ui-btn:after {
background-image: url("../image/aloha.png");
background-size: 90% 60%
}

Best,
john

John,

Please try the same advise - add 'weight' to your rules, for example with code!important/code, maybe original Appery.io css rules 'overweight' yours.

Thanks Evegeny! Do you mean font-weight? Like in the code below? Didn't work...

.alohaBtn.ui-btn:after {
background-image: url("../image/aloha.png");
background-size: 90% 75%;
font-weight: 16px !important
}

Hello John,

Please remove class "alohaBtn" from the CSS selector.
Your CSS should be like that:
pre.ui-btn:after {
background-image: url("../image/aloha.png");
background-size: 90% 75%;
font-weight: 16px;
}/pre

Hi Sergyi,

I don't understand... I only want to use that custom icon for one specific button, not for all of them!

Cheers,
john