Question

我想为按钮中的图标设置不同的背景颜色。例如，我想将信息图标的背景颜色更改为NAVY

这是我试过的

HTML中的

<a href="index.html" data-role="button" data-icon="info" class="icon-navy" data-inline="true" data-iconpos="notext"></a>

现在在生成按钮中图标得到匹配的css规则.ui-icon链接有规则图标 - 海军。

有没有办法查看.icon-navy的孩子是否有id .ui-icon并设置背景颜色

$('.icon-navy .ui-icon').css({'background-color':'navy'});

Answer 1

我找到了一个解决方案，你必须创建一个新的css类，如

.ui-listview.customIconColor .ui-icon{
    background-color: #0fc21a /*{global-icon-color}*/;
    background-color: rgba(.05,.9,.1,.9) /*{global-icon-disc}*/;
}

并将此课程插入

<ul class="customIconColor "></ul>

标签，它对我来说很好。在您的情况下，将其插入

<a></a>

标签可能。并检查数据角色，对我来说这是一个列表视图，根据需要修改CSS类。

Answer 2

.ui-icon-info {
    background-color: #FFFFFF !important;
}

jQuery在.ui-icon属性之前添加data-icon。

动态更改颜色：$('.ui-icon-info').css("background-color", "red");

参见示例：http://jsfiddle.net/androdify/LVnZw/

如何更改图标的背景颜色

2 个答案: