如何更改jquery图标颜色

Question

我正在使用Jquery移动图标。我在这里有点困惑，将实际图标颜色更改为红色，将背景更改为白色。见下面的html代码。

<div data-role="page"><div data-role="content">
<a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="notext">  </a</div></div>

这样的图标应该如下

请参阅 JS FIDDLE HERE

Answer 1

您需要添加数据主题属性，并且可以使用jQuery Mobile themeroller创建主题。 这是fiddle，颜色不同。

     <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="notext" data-theme="b"></a></div>

如果您不想为jQuery Mobile创建自己的主题，请使用检查器并找到正确的元素，然后将css添加到其中。例如：

.ui-btn-icon-notext .ui-btn-inner .ui-icon {
      background-color: #111;
 }

更新： 您必须创建自己的图标，然后更改图标背景图像：

.ui-btn-icon-notext .ui-btn-inner .ui-icon {

    background: url(http://png.findicons.com/files/icons/2165/office/48/home_01.png);
    background-size: 17px;

}