CODEWITHSUNDEEP
jqueryjquery-mobile
Andrew Ames
Andrew Ames

Reputation: 141

jQuery Mobile 1.2 Data-Icon "Edit" not working

 <a href="#" data-role="button" data-icon="edit">hello</a>

This button just displays with a Plus icon instead of the edit icon, anyone know why? I'm using jquery mobile, here is my header:

  name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Upvotes: 0

Views: 2219

Answers (3)

Alex Marinov
Alex Marinov

Reputation: 191

data-icon="edit" is available since jQuery Mobile 1.3.1 So you`d better use that version.

More information here - http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/

Upvotes: 0

RedWolves
RedWolves

Reputation: 10385

The edit icon was only introduced a month ago to be included in 1.3. It's not a bug with 1.2 it just wasn't included.

See blog post for more information: http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/

Upvotes: 3

Jimbo
Jimbo

Reputation: 26533

Looks like something's wrong with their CSS, as I just tried this locally. Here's a fix:

<style type="text/css">
    .ui-icon-edit {
        background-image: url(icons-18-white.png);
        background-repeat: no-repeat;
        background-position: -824px 50%;
    }
</style>

Either amend your own style sheet to add this or place this in your <head></head> below the rest of your CSS. Also you'll need to grab your own icons-18-white.png from here and save it locally.

To get the edit button working:

First, download icons-18-white.png and save it in the same folder as your webpage.

Then, just copy and paste this code and continue from there. 

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

<style type="text/css">
    .ui-icon-edit {
        background-image: url(icons-18-white.png);
        background-repeat: no-repeat;
        background-position: -824px 50%;
    }
</style>
</head>
<body>
    <a href="#" data-role="button" data-icon="edit">hello</a>
</body>
</html>

Upvotes: 1

Related Questions