Change jQuery icon color to white instead of gray

Question

I use jQuery icons in my asp.net mvc project. Usually I use gray icons but now I would like a white icon for my blue button (see below).

Here is the code I used:

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

How can I change the icon color to white?

Thanks

Answer 1

you can play around with the sprite used on that icon set:

White Icon Set (ui-icons_ffffff_256x240.png)

Store that sprite somewhere, then reference it in a style sheet you can apply to the blue buttons:

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

Then when you want a white icon set, apply that style:

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