Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Mobile - Navbar Icons not appearing
    primarykey
    data
    text
    <p>I have a JQuery Mobile application that I'm working on. In this application, I have a page that uses a Navbar in the footer (http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-navbar.html). This Navbar has three buttons.</p> <p>For some reason, the first time that I navigate to the page, the buttons show the default plus sign. However, if I refresh the page, or navigate via one of the other buttons in the footer, the icons that I have set appear as desired. How do I make it so that the navbar always shows the icons I have specified? Here is the code associated with my first page:</p> <pre><code>&lt;style type="text/css"&gt; .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; } .navbar .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; } #tab1 .ui-icon { background: url(/images/tab1.png) 50% 50% no-repeat; background-size: 24px 22px; } #tab2 .ui-icon { background: url(/images/tab2.png) 50% 50% no-repeat; background-size: 24px 22px; } #tab3 .ui-icon { background: url(/images/tab3.png) 50% 50% no-repeat; background-size: 24px 22px; } &lt;/style&gt; &lt;div id="tabsPage" data-role="page"&gt; &lt;div data-role="header"&gt; &lt;/div&gt; &lt;div data-role="footer" class="navbar"&gt; &lt;div data-role="navbar" class="navbar" data-grid="d"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" id="tab1" data-icon="custom" class="ui-btn-active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/tab2" id="tab2" data-icon="custom" rel="external" defaultPageTransition="none"&gt;Tab 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/tab3" id="tab3" data-icon="custom" rel="external" defaultPageTransition="none"&gt;Tab 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload