在jquery mobile中更改特定图标的颜色

Posted 2023-05-09

【中文标题】在jquery mobile中更改特定图标的颜色

【英文标题】：Change the color of a specific icon in jquery mobile

【发布时间】：2014-05-25 08:41:44

【问题描述】：

我编写了以下代码，但我希望我的主页图标为蓝色，例如。我怎样才能改变它的背景颜色？

  <ul data-role="listview" data-inset="true" class="ui-nodisc-icon ui-alt-icon">
        <li><a href="#page_1" class="ui-btn ui-icon-home ui-btn-icon-right" data-role="link" style="text-align: center; font: bold arial 95px;">Home</a></li>
        <li><a href="#" class="ui-btn ui-icon-shop ui-btn-icon-right" data-role="link" style="text-align: center;">Products</a></li>
    </ul>

【问题讨论】：

代码： 首页 产品

bar54.de/2014/02/jquery-mobile-change-color-of-svg-icons

【参考方案1】：

使用:after CSS 选择器覆盖按钮的图标。您还必须在覆盖 全局类 时进行具体说明，以免应用对所有按钮所做的更改。

ul.ui-nodisc-icon li:first-child .ui-btn:after 
  background-color: #4da6ff;

以上内容仅适用于列表视图的first-child。您可以将 li:first-child 和 .ui-btn 替换为添加到 anchor 的 id 或 class，例如：

<ul data-role="listview">
  <li>
    <a href="#" id="home">Home</a>
  </li>
</ul>

ul.ui-nodisc-icon #home:after 
  background-color: #4da6ff;

Demo

【讨论】：

谢谢老兄，在疯狂地尝试使用 jquery 示例执行此操作后，此答案立即生效。