问题
I'm using jQuery mobile with a custom theme created on themeroller
According to the instructions I have to include in the <head>:
<link rel="stylesheet" href="themes/mycustomtheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
My custom theme displays perfectly but if I want to use an icon like:
<a href="#home" data-transition="slideup" data-role="button" data-icon="home">Home</a>
The "home" icon doesn't show. It only displays an empty circle.
I work with google chrome.
What should I include to resolve the issue?
回答1:
Note that data-role="button" is deprecated in 1.4 and will be removed from 1.5, now classes are added manually.
<a href="#page" class="ui-btn ui-btn-icon-left ui-icon-home">Anchor</a>
Moreover, jQM is now using SVG icons for platforms that support SVG and normal icons for ones that dont. Icons are added after an element using pseudo selector :after.
Creating custom icons is simple as the CSS below.
.ui-custom-icon:after {
background-image: url('custom-icon.png');
background-size: 25px 25px; /* dont forget this */
}
Now add .ui-custom-icon to any element.
Demo
来源：https://stackoverflow.com/questions/20858528/icons-not-displaying-with-custom-theme