CODEWITHSUNDEEP
jqueryjquery-mobile
krrr25
krrr25

Reputation: 679

jquerymobile data-icon issue

If i use CDN hosted javascript and css url inside my html data-icon are displaying correctly. If i use local folder location inside my project its not working. Find the below code for reference. I have the content from the below mentioned CDN url only. Kindly advice what i am doing wrong.

Below code not working, round icon is displaying but i didnt get the info logo "i" inside the icon. 

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
 </head>
<body>
<div data-role="page" id="test">
    <div data-role="header" data-theme="b">
        <a href="#home" data-icon="info" data-iconpos="notext"></a>
        <h1>Home</h1>
    </div>
</div>
</body>
</html>

This code works if i use CDN url, icon with info symbol coming

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" type="text/css" />
<script type="text/javascript" src="code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="test">
    <div data-role="header" data-theme="b">
        <a href="#home" data-icon="info" data-iconpos="notext"></a>
        <h1>Home</h1>
    </div>
</div>
</body>
</html>

Upvotes: 0

Views: 930

Answers (2)

Butani Vijay
Butani Vijay

Reputation: 4239

If you are hosting the CSS style-sheet for jQuery Mobile then you need to also host the images (which are found in the same .zip file that the JS and CSS files came in)

The image sprites should be in a directory named images which is in the same directory as the jQuery Mobile CSS style-sheet (the style-sheet relatively references the images like this: background-image: url(images/icons-18-white.png);).

Source Location

Upvotes: 1

David MacCrimmon
David MacCrimmon

Reputation: 966

If you're using it locally you will need to upload the icons images to the server. The CDN will be hosting the images for you in the second example as the css is looking in a folder relative to the css file.

Inside the CSS for the icon class you'll see it uses the following: 

background-image: url(images/icons-36-white.png);

So you'll need to download the icons file from jquery. for example from here: http://code.jquery.com/mobile/1.3.2/images/icons-36-white.png

Upvotes: 3

Related Questions