Q:

jqueryUI custom button not showing up

I'm trying to create some custom jqueryui buttons relying on the answers to How do I add a custom icon to a standard jQuery UI theme? ,  especially the answer of Matthew/Panayiotis, to create some custom jqueryUI buttons here: 
http://nie-wieder.net/metronom/test.html
As you can see, the button is not shown and ... in short terms, I don't know what's wrong. 
I created a button located here: http://nie-wieder.net/metronom/img/plus-normal.png (there are 2 other files, plus-hover.png and plus-active.png) and considering firebug's not freaking around, the Files are loaded, but... as you can see, the buttons are not there :( 
css file is here: http://nie-wieder.net/metronom/css/style.css (scroll down, the phil-plus-classes)
I'm out of ideas, it would be great if you could help me! 
Best regards, 
Dominik

A:

I think the key thing to understand when it comes to using custom icons with the jQuery UI button is that icons, custom or not, are added to the ui-button. 
Thus, your blue-square-with-a-plus icon is being displayed on a silver rectangle because you're likely using the default jQuery UI theme, which makes the button background this silvery-gray color. 
To solve what you want to do here, I think you'll want to embrace Theme Roller to help you. 
On that page, change the background colors for Clickable: default state, Clickable: hover state, and Clickable: active state to colors that closely match your images (which, yes, I realize they're fancier than just a solid color, but bear with me here). 
The color changes will ensure that the button onto which an icon is added uses colors of your choice, rather than the default. 
From there, you'll need to decide how best to execute the custom icons. 
Keep in mind, from what we've seen already, that if a 30x30 icon is added to a ui-button, that button will have additional of padding on either side, by default. 
If you want to dig a bit deeper, open your jquery-ui CSS file (default or custom, either one), and search for Interaction states. 
There are seven lines of classes under this heading, and this is where the background, and other, colors for the ui-state-default classes are declared. 
Also in that CSS file, search for button text element. 
The third line under that heading starts with .ui-button-icon-only, and the styles associated with the elements on this line include padding: .4em; This is what's causing the button to be wider than intended! 
[Side note: In looking at the two lines that follow that there are classes named ui-button-icon-primary and ui-button-icon-secondary, so ui-button-icon-only is not for declaring that the button only contains an icon, but instead to declare that the button is using the only button style rather than declaring that one button is primary and another is secondary.] 
Hopefully, this gives you enough to create your buttons to your satisfaction, but let me know if you have any questions.