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

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

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

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

工作CSS（感谢奥马尔）

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

来源

2014-02-28 Baked Inhalf

我们没有足够的信息。我怀疑你的图标是图像，所以你可能无法改变它们的颜色。您正在使用图标字体，您需要更改该字体的“颜色”。 –

尝试伪选择器'：之后'。 '的.ui图标检查：after'。 – Omar

这都是标准的jQuery Mobile。没有自定义图标。我尝试更改** ui-icon-check **图标。我做了一个小提琴，它似乎工作在1.3，但我使用1.4.0版本 –

jQuery用户界面图标设置颜色，如果你想改变颜色，你需要使用一个图像编辑程序，这样做（根据到jQuery mobile ui网站的源文件）。

解决这个另一种方法是使用基于图标的字体如font-真棒并使用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; 
}

为了安全起见，并没有乱了原来实行的字体真棒代码。

来源

2014-05-28 20:51:50 DrewRobertson93

无需进行图像编辑，只需使用CSS更改颜色 –

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

回答

相关问题