jquery - Icons not displaying with custom theme

Question

Welcome To Ask or Share your Answers For Others

jquery - Icons not displaying with custom theme

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - Icons not displaying with custom theme

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:31:55+0000

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

Categories

jquery - Icons not displaying with custom theme

jquery - Icons not displaying with custom theme

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags