I use the JQuery UI to create and style buttons a lot. They have a really good icon set, however, I came into a situation where I was required to use custom icons provided to me for a project I was working on. Here is how I accomplished it.
Example HTML Button
There is nothing special here, just a simple button with some text and an ID to use as our selector.
<button id="myRefreshBtn" type="button">myRefreshButtonText</button>
Example CSS
The magic is really in the CSS. I create a custom class to use during the JQuery button initialization. The portion .custom-ui-icon-refresh can be changed to whatever you want to call the class. I want to also point out that I am using a 16×16 icon. I found that this works the best sense JQuery also uses 16×16 icons, although JQuery uses a sprite.
.ui-button .ui-icon.custom-ui-icon-refresh {
background-image: url("/my/icon/path/16x16/refresh.png");
}
Example JQuery code
When I initialize the JQuery button I just set the primary icon class to the custom class I referenced in the CSS.
$("#myRefreshBtn").button({
icons: {
primary: "custom-ui-icon-refresh"
}
});
Example finished product
I welcome any comments or suggestions.