Robert Harrington
Posts: 0
Joined: Thu Aug 07, 2014 6:25 pm

Source Editing Tutorial: Issue w/ Icon Image Appearing in the Button

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?

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Source Editing Tutorial: Issue w/ Icon Image Appearing in the Button

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.

Robert Harrington
Posts: 0
Joined: Thu Aug 07, 2014 6:25 pm

Source Editing Tutorial: Issue w/ Icon Image Appearing in the Button

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.

Robert Harrington
Posts: 0
Joined: Thu Aug 07, 2014 6:25 pm

Source Editing Tutorial: Issue w/ Icon Image Appearing in the Button

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

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Source Editing Tutorial: Issue w/ Icon Image Appearing in the Button

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

Return to “Issues”