jQuery Mobile data-icon=bars displaying as plus icon when using Doctype

StackOverflow https://stackoverflow.com/questions/17998433

  •  04-06-2022
  •  | 
  •  

Question

Looking for a workaround to get around this or if there is a better way to resolve the issue I am open to adjusting the code..

Here is the situation:

If I do not use a doctype then the bars icon is appearing just fine within a controlgroup, however as soon as I add the doctype then it seems to flip to the plus icon instead.

The only change is adding the doctype to the top of the file and the icon flips from bars to plus.

Doesn't matter if it is jQuery Mobile 1.3.1 or 1.3.2, having the same results

Has anyone encountered this or found a way around it? I really want the bars icon to be displayed and am trying to avoid not using the doctype declaration so the code can validate properly.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url('include/jquery.mobile-1.3.2.min.css');
</style> 
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" /> 
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">

<div data-role="controlgroup" data-type="horizontal" class="ui-body">
 <a href="test.asp" data-role="button" data-mini="true" data-icon="Bars">Test</a>
</div>

</div>
</div>
</body>
</html>

EDIT: Same issue occurs with the GRID icon

Was it helpful?

Solution

This is just a typo. Replace 

data-icon="Bars"

with 

data-icon="bars"

And your'e good to go. You have to follow the exact case when it comes to images. The full set can be found here : http://api.jquerymobile.com/icons/

Here's a demo : http://jsfiddle.net/hungerpain/cpRh2/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top