title: jquery.mobile-1.4.1 not allowing custom setting footer navbar icons
body: <p>I am working on jQuery mobile on intel-xdk and trying to set navbar in footer with custom icons. I have tried so many codes and tried to change the icons. With jquery.mobile-1.4.1 i am unable to find and set custom properties for nav bar icons. Now i tried my code with different versions which are not the latest ones:<br>
  1)1.2.1 and 1.8.1 these are working and allowing custom nav bar icons. When i used latest jQuery which is 1.4.1 I find ui-icon attribute in css but I found that it is applying through 1.4.1.js. I am stuck with that and want to use jQuery also for the slider. For this I have to use jQuery1.4.1 but with that I am unable to get custom nav bar icons. Any solution?</p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!--First try with it(its not working)--&gt;
  &lt;!-- &lt;link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" /&gt;
   &lt;script src="js/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.mobile-1.4.1.min.js"&gt;&lt;/script&gt; --&gt;
  
  
  
  &lt;!--Second try with it(its working)--&gt;
  &lt;!--     &lt;link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /&gt;
   &lt;script src="js/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt; --&gt;
  
  &lt;!--third try with it(its not working)--&gt;
  &lt;!-- &lt;link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" /&gt;
   &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.mobile-1.4.1.min.js"&gt;&lt;/script&gt; --&gt;
  
  
  
   &lt;style&gt;
    .ui-icon-taifun {
      background-image: url("taifun.png");
    }
  
    .nav .ui-btn .ui-btn-inner {
      padding-top: 40px !important;
    }
  
    .nav .ui-btn .ui-icon-taifun {
      width: 45px!important;
      height: 35px!important;
      margin-left: -24px !important;
      box-shadow: none!important;
      -moz-box-shadow: none!important;
      -webkit-box-shadow: none!important;
      -webkit-border-radius: none !important;
      border-radius: none !important;
    }
  
    #programas .ui-icon {
      background-image: url(taifun.png);
      background-position: 0 0;
      background-repeat: no-repeat;
    }
   &lt;/style&gt;
  
   &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div data-role="page"&gt;
      &lt;div data-role="content"&gt;
        &lt;div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false"&gt;
          &lt;h2&gt;&lt;img src="favicon.ico"&gt; Pets&lt;/h2&gt;
          &lt;ul data-role="listview"&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Canary&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Cat&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Dog&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/div&gt;&lt;!-- /collapsible --&gt;
         &lt;div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false"&gt;
           &lt;h2&gt;&lt;img src="favicon.ico"&gt; Farm animals&lt;/h2&gt;
           &lt;ul data-role="listview"&gt;
             &lt;li&gt;&lt;a href="index.html"&gt;Chicken&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="index.html"&gt;Cow&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="index.html"&gt;Duck&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;&lt;!-- /collapsible --&gt;
      &lt;/div&gt;
  
    &lt;div data-role="footer"&gt;
      &lt;div data-role="navbar" class="nav" data-grid="d"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#programas" id="programas" data-icon="custom"&gt;Programas&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#noticias" id="noticias" data-icon="custom"&gt;Noticias&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#radio" id="radio" data-icon="custom"&gt;Radio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#eventos" id="eventos" data-icon="custom"&gt;Eventos&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#more" id="more" data-icon="custom"&gt;More&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>