Search code examples
jqueryjquery-mobilenavbar

jquery mobile navbar icons appear twice

The icons in my jQuery Mobile NavBar appear twice, can't see why, code copied from jQuery docs

<link rel="stylesheet"
      href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

and the navbar itself

<div data-role="navbar" class="ui-navbar" role="navigation">
  <ul class="ui-grid-b">
    <li class="ui-block-a">
      <a id="showlatest" data-icon="grid" data-theme="a"
         class="ui-btn-active ui-btn-icon-top ui-btn-up-a">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Latest</span>
          <span class="ui-icon ui-icon-grid ui-icon-shadow"></span>
        </span>
      </a>
    </li>
    <li class="ui-block-b">
      <a id="showstages" data-icon="star"
         class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Top</span>
          <span class="ui-icon ui-icon-star ui-icon-shadow"></span>
        </span>
      </a>
    </li>
    <li class="ui-block-c">
      <a id="showclass" data-icon="gear" data-theme="a"
         class="ui-btn ui-btn-up-a ui-btn-icon-top">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Other</span>
          <span class="ui-icon ui-icon-gear ui-icon-shadow"></span>
        </span>
      </a>
    </li>
  </ul>
</div>

The output appears like in this picture:

enter image description here

suggestions as to why this is happening?

Solution

  • You don't have to explicitly specify the span tags. They are generated for you by the jQuery plugin itself. try replacing by this code.

    <div data-role="navbar" class="ui-navbar" role="navigation">
  <ul class="ui-grid-b">
    <li class="ui-block-a">
      <a id="showlatest" data-icon="grid" data-theme="a"
         class="ui-btn-active ui-btn-icon-top ui-btn-up-a">Latest</a>
    </li>
    <li class="ui-block-b">
      <a id="showstages" data-icon="star"
         class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a">Top</a>
    </li>
    <li class="ui-block-c">
      <a id="showclass" data-icon="gear" data-theme="a"
         class="ui-btn ui-btn-up-a ui-btn-icon-top">Other</a>
    </li>
  </ul>
</div>