Geek Answers Handbook

Change the color of a specific icon in jQuery mobile

I wrote the following code, but want my home icon to be blue, for example. How to change the background color?

<ul data-role="listview" data-inset="true" class="ui-nodisc-icon ui-alt-icon"> <li><a href="#page_1" class="ui-btn ui-icon-home ui-btn-icon-right" data-role="link" style="text-align: center; font: bold arial 95px;">Home</a></li> <li><a href="#" class="ui-btn ui-icon-shop ui-btn-icon-right" data-role="link" style="text-align: center;">Products</a></li> </ul>
+6
source share
1 answer

Use :after CSS selector to override the button icon. You should also be specific when overriding global classes so that you don’t apply the changes made to all buttons.

 ul.ui-nodisc-icon li:first-child .ui-btn:after { background-color: #4da6ff; }

The above will only apply to the first-child list. You can replace li:first-child and .ui-btn with an id or class binding, for example:

 <ul data-role="listview"> <li> <a href="#" id="home">Home</a> </li> </ul> ul.ui-nodisc-icon #home:after { background-color: #4da6ff; }

Demo

+7
source

More articles:


All Articles