Change icon on list

[Slang]

Yes I shared the app. The app is called Iqamah, I've set the start page to the one that has a problem, with the list in it.

[Alena Prykhodko]

Please try the first workaround to change icon:

Change "Class Name" property in List Component properties to "my-custom-list".
Create Custom CSS with following rule:
code.my-custom-list li span.ui-icon
{
background-image: url("app-icon-email.png") !important;
}/code
It's working for your app.

[marieall]

Hi,

I just found this topic since i'm having the same kind of difficulties :
I am trying to set a different style of arrow depending on which sections of my app I'm in.

I set a personalized class name, and created the css given, but it's not working.. It's still the same arrow, which I set by defaults in the theme, that is showing...

In the theme file :

In the css file created:

[Maryna Brodina]

Hello! Please check if you have correct CSS selector. If selector is correct in developers console check what styles overwrite your style.

[marieall]

Hi,

The CSS Selector is correct. At least I think so. I used the one recommended by the employee earlier in this topic.
What I can notice is when I use the "inspect element" , the css selector appears to have no parameter although I did (as you could see in my css fil attached above)

Any other advice?

[Maryna Brodina]

Hello! Please share your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a.

[Maryna Brodina]

Hello! You describe style for pre.A1_Airports_Country_mobilelistitem_54 .ui-icon/prein CSS asset Airports-Countries.css, not in theme file FlyingWithRyan.css. You specify image path as if you describe this style in theme file. Change image path to the following pre.A1_Airports_Country_mobilelistitem_54 .ui-icon {
background-image: url('../image/arrow-airportslist.png') !important;
}/preSo in fact your CSS asset file is here prefiles/views/assets/image/arrow-airportslist.png/preand you'll refer to image uploaded in assets (not image added in theme) prefiles/views/assets/image/arrow-airportslist.png/preIf you added this style in theme file, file itself would be here prefiles/resources/lib/theme/FlyingWithRyan/FlyingWithRyan.css/preand image added in theme here prefiles/resources/lib/theme/FlyingWithRyan/images/arrow-airportslist.png/prethen your style pre.A1_Airports_Country_mobilelistitem_54 .ui-icon {
background-image: url("images/arrow-airportslist.png") !important;
}/pre would work correct. So you have to either place your style in CSS file theme, or in Airports-Countries.css CSS asset use style we've suggested (with changed image path)

[marieall]

Thanks for all this explanation, it is much clearer now!
.... But it is still not working... The arrow is not appearing...
Maybe I made a mistake with the selector?

[Maryna Brodina]

Path I've posted above is just an example. You should use different relative path. It can be changed depending on place where you put CSS. In your case as you add CSS in Airports-Countries.css you have to use the following code: pre.A1_Airports_Country_mobilelistitem_54 .ui-icon {
background-image: url('../image/arrow-airportslist.png') !important;
}/pre

[marieall]

It works!! But it's weird I thought I tried this code before... well, it works now anyway !

Thanks for all your help!