Change the color of a specific icon in jquery mobile

Question

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>

Answer 1

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