sbaltes
sbaltes

Reputation: 479

jQuery Mobile: some button icons do not show up

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

Answers (2)

RedWolves
RedWolves

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

A. Wolff
A. Wolff

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

Related Questions