jquery - JQuery Mobile header 中的自定义图标

Question

我正在尝试在 JQuery Mobile 应用程序的标题中使用自定义图标。我尝试使用的特定图标只是 Glyphish (http://glyphish.com/) 中的“播放”图标。当我尝试在标题内的右侧按钮中使用它时，如下所述: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html ，我的图标看起来很奇怪。我似乎无法在标题栏中找到简单的“播放”按钮。这是我的代码:

<style type="text/css">
  .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
  #custom .ui-icon{ background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; }  
</style>

<div id="myPage" data-role="page" data-dom-cache="false">
    <div data-role="header">
        <h1>My Title</h1>
        <a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus">Continue</a>
    </div>

    <div data-role="content">
    <!-- page content goes here -->
    </div>
</div>

有人可以告诉我如何解决这个问题吗？

Answer 1

按如下方式更改自定义图标的 CSS 名称

<style type="text/css">
  ... clipped... 
.ui-icon-custom
{ 
    background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px;  
}  

jQuery mobile 将“ui-icon”添加到您为 data-icon 属性提供的值之前，以构造 css 类名称。由于您的数据图标属性的值为“自定义”。相关的 css 类应名为“.ui-icon-custom”。

引用号:http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html