Reputation: 479
I'm using jQuery mobile locally (not from CDN) and everything worked fine until now. I want to change the icons of some buttons as described here, but some icons (e.g. bars and edit) do not work.
Update: Tried the CDN files, which doesn't work either.
If I use for example this code:
<div data-role="content">
<a href="index.html" data-role="button" data-icon="edit">My button</a>
</div>
The button gets rendered with a plus icon. The strange thing is that some icons (like plus, arrow-u, arrow-d, forward and check) work just fine. Does someone have any suggestions what could have went wrong here? Thanks in advance!
./: index.html
./css: jquery.mobile-1.2.0.css jquery.mobile-1.2.0.min.css
./css/images: ajax-loader.gif icons-18-white.png icons-36-white.png icons-18-black.png icons-36-black.png
./js: custom-scripting.js jquery-1.8.3.min.js jquery.mobile-1.2.0.min.js jquery-1.8.3.js jquery.mobile-1.2.0.js
The head of my html file looks like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css" />
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/custom-scripting.js"></script>
<script src="./js/jquery.mobile-1.2.0.js"></script>
</head>
Upvotes: 1
Views: 3358
Reputation: 10385
The Bars and Edit icons were just added to jQuery Mobile a month ago https://github.com/jquery/jquery-mobile/issues/5340
These icons are not in the latest stable version of jQuery Mobile (1.2.0) You can get these if you use the latest versions of jQuery Mobile or wait till jQuery Mobile 1.3.0 comes out.
Upvotes: 1
Reputation: 74420
You have to set background-position of ui-icon-edit class in your CSS file (jquery.mobile-1.2.0.css), e.g:
.ui-icon-edit {background-position: -288px 0;}
Upvotes: 0