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

Question

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

4

我尝试将图标的背景颜色从默认的浅灰色改为绿色，但它也改变了整个按钮的背景。如何防止这种情况发生？我只想改变图标的颜色。

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关键字解决了问题！由于这个页面是动态的，我想它需要在“before”之后应用CSS，而不是在“before”之前？

工作的CSS（感谢Omar）

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

- Baked Inhalf

1

尝试使用伪选择器 :after。.ui-icon-check:after。 - Omar

这都是标准的jQuery Mobile。没有自定义图标。我试图更改ui-icon-check图标。我做了一个fiddle，在1.3中似乎可以工作，但我使用的是1.4.0版本。 - Baked Inhalf

1

你能提供更多的信息吗？ - jessica

哦，是 ":after" 关键词解决了它！ - Baked Inhalf

1

我会谨慎使用!important——它会破坏CSS规则的自然流程...在这里查看 - Bomber

显示剩余13条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DrewRobertson93 · Answer 1

jQuery UI图标已经设置为特定颜色，如果您想更改颜色，需要使用图像编辑软件进行更改（根据jQuery移动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代码实现。