The background color icon also changes the color of the button. JQM 1.4.0

Question

I'm trying to set the background color of the icon to green, and not the default - light gray, but also changes the background of the entire button. How can I prevent this? I want the icon to change color.

jQuery Mobile 1.4.0

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
       <ul>
          <li><a href="#start" data-icon="home">Start</a></li>
          <li><a href="#" data-icon="check">Test</a></li>
         <li><a href="#" data-icon="gear">Test2</a></li>
      </ul>
   </div><!-- /navbar -->
</div><!-- /footer -->  

CSS

.ui-icon-check
{
    background-color: #0f0 !important;
}

UPDATE: Keyword : after solved this! Due to the fact that this page was dynamic, I suppose that she needed to apply CSS instead of "earlier"?

Working CSS (thanks to Omar )

.ui-icon-check:after
{
     background-color: green !important;
}

Answer 1

jQuery UI , , ( - jQuery mobile ui).

: , , -awesome css :

.ui-icon-check{
   color:#FFF; /* Change to Desired Color Hex ( Or RGBA ) */
}

<span class='fa fa-check'/>

.

<span class='fa fa-check my_icon_class' />

.my_icon_class{
    color:#FFF;
}

Awesome.