I wrote the following code, but I want my home icon to be in blue, for example. How can I change it 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>
Use :after
CSS selector to override button's icon. You also have to be specific when overriding global classes in order not to apply changes made on all buttons.
ul.ui-nodisc-icon li:first-child .ui-btn:after {
background-color: #4da6ff;
}
The above will be be applied only on first-child
of the listview. You can replace li:first-child
& .ui-btn
with an id
or class
added to anchor, e.g.:
<ul data-role="listview">
<li>
<a href="#" id="home">Home</a>
</li>
</ul>
ul.ui-nodisc-icon #home:after {
background-color: #4da6ff;
}
Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With