Forum | Appery.io

In the source editing tutorial, I am having an issue getting the image to show up in the button. Essentially, this part of the tutorial has the user upload an image and use CSS to replace the icon in the button.

I have successfully uploaded an image in the web_resources/files/resources/image directory. I follow the tutorial by creating a new CSS page and inputting the given CSS (of course, changing the name of the file to my file name).

From here, things don't seem to work - i.e. the image does not show where it supposedly should in the button icon. In order to make sure the stylesheets are working properly, I made changes to the font-size and that works fine. It's just the background-image style does not seem to work.

I can think of two issues:

1. The path to the image in the example is incorrect.

2. There is some characteristic of my image that is causing an issue (maybe it's not sized correctly.

   Can someone in support take a look?

Hi Robert,

It's hard to determine what could be wrong, you can provide a public link to your app or share it with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell us the name of your app.

Thanks for your prompt reply - I just shared it with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a. The app name is Icon_Change. Let me know if you can't see it.

Hello Robert,

Yes, a few steps were skipped:
first this: http://devcenter.appery.io/wp-content...
second this: http://devcenter.appery.io/wp-content...

I actually did try those - I must have rolled them back when I was trying to debug. I tried it from scratch again and it still doesn't work, so I reshared the app called Icon_Changes.

Note that the CSS in the tutorial uses "background" instead of "background-image" - i made the change (in fact I tried both ways) and it didn't work.

Thanks,
Rob

Robert,

This approach will work only on the library versions 1.2 and below, you only need to use this css:
pre.ui-icon-skype .ui-icon {
background-image: url('../../../resources/image/rewind-button-white-icon.png');
background-size: cover;
background-position:0 0;/pre