Primefaces Custom icon in commanbutton

Question

I want a PNG File (26*26px) as background of my Primefaces Button.

this is my css class

.btnCreate {
border-radius: 0px;
background-image: url("#{resource['images/create.png']}") !important;
width: 26px;
height: 26px;
}

and this would be the Button

<p:commandButton icon="btnCreate" title="Icon Only" />

Here is the outcome:

outcome

How can I position the Image in the middle of the button?

Edit2: As some people suggested I tried changing values @background-position but that didn't help either since it was just cutting the image and display only the right or left border

outcome after back-position:-10px-10

Answer 1

Some fancy stuff is going on here, may try

    <p:commandButton icon="btnCreate" title="Icon Only"
        styleClass="btnCreate" style="width:26px; height:26px" />

CSS:

.btnCreate { border-radius: 0px; background: url(resources/images/create.png); no-repeat !important; background-position: 0 0 !important; border: 0px; }

works for me under 3.5 now

Answer 2

Just use background-position :

.btnCreate {
  border-radius: 0px;
  background-image: url("#{resource['images/create.png']}") !important;
  width: 26px;
  height: 26px;
  background-position: -10px -10px;
}

EDIT: Here you have the full example:

First create the button with icon only:

<p:commandButton icon="btnCreate" title="Icon Only"  styleClass="iconOnlyButton"/>

Now, define style for button with icon only:

.iconOnlyButton{
    background: transparent !important;
    border: none !important;
    margin: 0;
}

And Icon:

.btnCreate {
    background-image: url("#{resource['images/create.png']}") !important;
    width: 26px;
    height: 26px;
    background-position: 0px 0px;
}

Add styles for button like border , background-color etc to iconOnlyButton class in CSS. In btnCreate keep only attributes for your image. You can adjust background-position on the fly in any modern browser like Chrome or Firefox