图标背景颜色也会改变按钮颜色。 JQM 1.4.0答案

【问题标题】：Icon background color also changes button color. JQM 1.4.0图标背景颜色也会改变按钮颜色。 JQM 1.4.0
【发布时间】：2014-02-28 16:21:57
【问题描述】：

我尝试将图标的背景颜色设置为绿色而不是默认的浅灰色，但它也会更改整个按钮的背景。我怎样才能防止这种情况？我只希望图标改变颜色。

jQuery Mobile 1.4.0

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
       <ul>
          <li><a href="#start" data-icon="home">Start</a></li>
          <li><a href="#" data-icon="check">Test</a></li>
         <li><a href="#" data-icon="gear">Test2</a></li>
      </ul>
   </div><!-- /navbar -->
</div><!-- /footer -->

CSS

.ui-icon-check
{
    background-color: #0f0 !important;
}

更新： :after 关键字解决了它！由于这个页面是动态的，我想它需要在之后而不是“之前”应用 CSS？

工作 CSS（感谢 Omar）

.ui-icon-check:after
{
     background-color: green !important;
}

【问题讨论】：

我们没有足够的信息。我怀疑您的图标是图像，因此您可能无法更改它们的颜色。如果您使用的是图标字体，则需要更改该字体的“颜色”。
试试伪选择器:after。 .ui-icon-check:after.
都是标准的 jQuery Mobile。没有自定义图标。我尝试更改 ui-icon-check 图标。我做了一个小提琴，它似乎在 1.3 中工作，但我使用的是 1.4.0 版
你能提供更多信息吗？？
我会小心使用 !important - 它会破坏 CSS 规则的自然流动...see here

标签： android css jquery-ui jquery-mobile

【解决方案1】：

jQuery UI图标是设置颜色的，如果你想改变颜色，你需要使用图像编辑程序来完成（根据jQuery mobile ui网站的源文件）。

解决此问题的另一种方法是使用基于图标的字体，例如 font-awesome，并像这样使用 css：

.ui-icon-check{
   color:#FFF; /* Change to Desired Color Hex ( Or RGBA ) */
}

实际上最终是什么

<span class='fa fa-check'/>

我相信。

我会添加一个附加类

<span class='fa fa-check my_icon_class' />

并使用

.my_icon_class{
    color:#FFF;
}

为了安全起见，不要弄乱 Font Awesome 代码的原始实现。

【讨论】：

无需图像编辑，只需使用 css 更改颜色