JQuery Mobile Header中的自定义图标

我正在尝试在我的JQuery Mobile应用程序的头文件中使用自定义图标。我试图使用的特定图标就是来自Glyphish（http://glyphish.com/）的“play”图标。当我尝试在标题中的右侧按钮中使用它时，如下所示： http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html，我的图标显得很奇怪。我似乎无法在我的标题栏中获得简单的“播放”按钮。这是我的代码：JQuery Mobile Header中的自定义图标

<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>

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

来源

2012-03-10 JQuery Mobile

奇，与像@JQuery移动用户名，我想你将有答案。 – shanabus 2012-03-11 03:16:20

“codaniel”试图说的不是你以后的样子。他试图解释按钮自定义图标，但我意识到你正在寻找的是Navbar自定义图标。看到这篇文章： http://stackoverflow.com/questions/6243871/glyphish-icons-display-in-jquery-mobile – 2012-09-04 01:03:27

jquery mobile有一种自定义按钮图标的方法。这是一个工作示例http://jsfiddle.net/codaniel/88kQu/1/

以下是http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

珍闻要使用自定义图标，指定具有类似的myapp电子邮件和按钮插件唯一名称的数据图标值将产生一类在数据图标值前缀ui-icon-并将其应用于按钮：ui-icon-myapp-email。

然后，您可以在样式表中编写一个CSS规则，该规则以ui-icon-myapp-email类为目标来指定图标背景源。为了保持与其他图标的视觉一致性，请创建一个18x18像素的白色图标作为具有Alpha透明度的PNG-8保存。

在这个例子中，我们只是指向一个独立的图标图像，但您可以轻松地使用图标精灵并指定定位，就像我们在框架中使用的图标精灵一样。

.ui-icon-myapp-email { 
    background-image: url("app-icon-email.png"); 
}

来源

2012-03-11 06:54:37 codaniel

更改自定义图标的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图标”给你提供的数据图标属性构建CSS类名的值。由于你的data-icon属性的值是'custom'。相关的css类应该被称为'.ui-icon-custom'。

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

来源

2012-03-11 12:22:46 sumitkm

JQuery Mobile Header中的自定义图标

回答

相关问题