CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Spring
Spring

Reputation: 11835

jQuery why some of my icons start looking incorrect

I use jQuery mobile on my app, Everything was ok but I just noticed that these two items below does not look correct anymore.

First one is a selection and there used to be a small arrow instead of that empty gray circle.

And second is the spinnig wheel there used to be the animation wheel now there is an empty gray circle..

Dont know which part of code change really effected this, any ideas?

enter image description here

enter image description here

Upvotes: 7

Views: 867

Answers (2)

Omar
Omar

Reputation: 31732

Mayu Mayooresan answer is correct for using CDN-Hosted jQuery-Mobile.

If you want to Host it locally, download jQuery Mobile, extract the files to folder /js/. The structure should look like this:

HTML files, directly in root folder

webapp/Index.html

Scripts under root/JS folder

webapp/js/jquery.mobile-1.3.0.min.css

webapp/js/jquery-1.8.2.min.js

webapp/js/jquery.mobile-1.3.0.min.js

Images under root/JS/images/ folder

webapp/js/images/ajax-loader.gif

webapp/js/images/icons-18-black.png

webapp/js/images/icons-36-black.png

webapp/js/images/icons-18-white.png

webapp/js/images/icons-36-white.png

In your HTML file:

<head>
 <link rel="stylesheet" href="js/jquery.mobile-1.3.0.min.css" />
 <script src="js/jquery-1.8.2.min.js"></script>
 <script src="js/jquery.mobile-1.3.0.min.js"></script>
</head>

Upvotes: 4

Jaya Mayu
Jaya Mayu

Reputation: 17247

You are missing the reference to the images files. You need to get the images into your project. When you download the library as ZIP file you can find the folder which contains the images.

Else use CDN as below

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

Upvotes: 4

Related Questions