Why my icons are gray and not white?

Why my icons are gray and not white?

Hi Forum,
 
I just am testing the glyphish-icons and I am asking me why my icons become not the same as the official jquery mobile example: http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
 
My icons becomes dark gray and not white like the example. Here my result:
Here what I want:
 
Do you know why?
 
Script:
  1. <!DOCTYPE html>
    <html>
     <head>
     <title>Page Title</title>
     
     <meta name="viewport" content="width=device-width, initial-scale=1">




  2.  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head>
    <body>
    <style> 
      .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
      .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
      #chat .ui-icon { background:  url(glyphish-icons/09-chat-2.png) 50% 50% no-repeat; background-size: 24px 22px; }
      #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
      #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
      #beer .ui-icon { background:  url(glyphish-icons/88-beer-mug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
      #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
      #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
    </style> 
    <!-- Start of first page -->
    <div data-role="page" id="foo">















  4.  <div data-role="header">
      <h1>Page Header</h1>
      <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
      <ul>
       <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
       <li><a href="#" id="email" data-icon="custom">Email</a></li>
       <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
       <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
       <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
      </ul>
      </div>
     </div><!-- /header -->










  5.  <div data-role="content"> 
      <p>I'm first in the source order so I'm shown as the page.</p>  
      <p>View internal page called <a href="#bar">bar</a></p> 
     </div><!-- /content -->


  6.  
     <div data-role="footer" class="nav-glyphish-example">
      <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
      <ul>
       <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
       <li><a href="#" id="email" data-icon="custom">Email</a></li>
       <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
       <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
       <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
      </ul>
      </div>
      <h4>Page Footer</h4>
     </div><!-- /footer -->
    </div><!-- /page -->
    </body>













  7. </html>