Custom button icons not appearing on execution

[Angel Garcia]

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?

[Evgene Karachevtsev]

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.

[Angel Garcia]

Hello Evgene,

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

Thanks.

[John7876801]

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

[Evgene Karachevtsev]

Hello John,

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

[John7876801]

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

[Evgene Karachevtsev]

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.

[John7876801]

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
}

[Serhii Kulibaba]

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

[John7876801]

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