我如何更改 jquery 图标的颜色答案

【问题标题】：How do i change the jquery icons color我如何更改 jquery 图标的颜色
【发布时间】：2014-12-18 06:26:16
【问题描述】：

我正在使用 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

【问题讨论】：

到目前为止你尝试了什么？
这与标记的内容不重复！
找到要更改的元素，在本例中为 .ui-btn-icon-notext .ui-btn-inner .ui-icon {margin: 2px 1px 2px 3px;float: left;} (这是默认值），添加背景颜色：#ff0000;这里将这些放在 ext 样式表中并将其添加到您的头部（在 jquery 默认 css 文件之后），另一种解决方案是制作一个自定义类 forex class="mybtn" 定义您的 css 并将 !impotant 放入其中。
你也可以在中使用 "style=background-color:red" {find this span tag using browser inspector}
@jai 错误答案，图标是 SVG。

标签： jquery css jquery-mobile

【解决方案1】：

你需要添加一个data-theme属性，你可以使用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;

}

【讨论】：

我想把图标颜色改成红色见上图
我更新了我的答案。我希望它对你有帮助。您必须创建所需颜色的图标。