Question

我尝试将图标的背景颜色设置为绿色而不是默认的浅灰色，但它也会更改整个按钮的背景。我怎么能阻止这个？我只想让图标改变颜色。

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

Answer 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代码的原始实现。

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

1 个答案: