CODEWITHSUNDEEP
jqueryjquery-mobile
amedeiros
amedeiros

Reputation: 949

Jquery Mobile Button Icons

Im working a jquery mobile app the the icon buttons are not showing up. I edited the css file for the correct path to the icons and they still are not showing. Thanks for any help in advance.

Here is the code where I am making the buttons 

    <div data-role="content">
    <a href="new.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Capture New</a>
    <a href="settings.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Settings</a>
    <a href="timeline.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Timeline</a> 
</div><!-- /content -->

This is what i have loaded in my header 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel = "stylesheet" href="assets/css/jquery.mobile-1.0.1.min.css" />
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.mobile-1.0.1.min.js"></script>

Here is a cropped out screenshot of the buttons. The icons do not show for some weird reason. Here is a cropped out screenshot of the buttons

Upvotes: 2

Views: 983

Answers (1)

Jasper
Jasper

Reputation: 76003

My guess is that you have not properly uploaded the images directory that is associated with the CSS style-sheet. If you watch your console or network tabs in your developer tools, you should be getting an error saying that the icon sprite can't be found.

Here is your isolated code but hooked-up using the CDN versions of the jQuery Mobile files: http://jsfiddle.net/wzMRz/. You can see that the icons appear as desired.

If you host the jQuery Mobile files yourself, make sure to host the /images/ directory in the ZIP file containing the jQuery Mobile includes. This directory needs to be in the same directory as the CSS style-sheets so the style-sheets can properly reference the images (or if you want to move the sprite, you just have to update the URLs in the style-sheets to reflect).

Upvotes: 2

Related Questions