将 jQuery 图标颜色从灰色改为白色

Question

我在我的asp.net mvc项目中使用jQuery图标。通常我使用灰色图标，但现在我想要一个白色图标来配合我的蓝色按钮（如下所示）。

这是我使用的代码：

$(".editUser").button({ icons: { primary: "ui-icon-pencil"} });
$(".deleteUser").button({ icons: { primary: "ui-icon-trash"} });

我该如何将图标颜色变为白色？

谢谢。

- Bronzato

Answer 1

你可以尝试修改图标集中使用的精灵图：

白色图标集 (ui-icons_ffffff_256x240.png)

将该精灵图保存在某处，然后在一个样式表中引用它，以应用于蓝色按钮：

.ui-icon-white {
  background-image: url("images/ui-icons_ffffff_256x240.png");
}

当您想要一个白色图标集时，请应用该样式：

<span class="ui-icon ui-icon-white ui-icon-pencil"></span>

- Brad Christie

---

更新：上面提供的白色图标集链接已失效。以下是另一个链接：http://strd6.com/stuff/jqui/theme/images/ui-icons_ffffff_256x240.png - Aylen

Answer 2

使用Font Awesome轻松更改字体颜色：

$(".editUser").button({
  html: '<span class="fa fa-check"></span> Yes',
  "class": 'bg-success text-white p-2 border-0',
  icons: { primary: "ui-icon-pencil" }
}); 

- jhombalz

---

是的，Font Awesome 是一个很棒的产品，感谢分享。 - Bronzato