jqueryjquery-ui

Change jQuery icon color to white instead of gray

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).

enter image description here

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

Solution

  • 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>