Change jQuery icon color to white instead of gray

Question

I am using jQuery icons in my asp.net mvc project. I usually use gray icons, but now I need 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 to change the color of the icon to white?

thanks

Answer 1

You can play with the sprite used in this icon:

Set of white icons (ui-icons_ffffff_256x240.png)

Store this sprite somewhere, and then reference it in the stylesheet, which you can apply to the blue buttons:

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

Then, when you want to set the white icon, apply this style:

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

Answer 2

Use Font Awesome to easily change the font color:

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