I can have an icon in a three way:
#1. Button as a picture. There is no value/description visible. Only an icon/picture.
<p:commandLink action="#{someBean.someAction()}">
<h:graphicImage name="images/new_create.png" />
</p:commandLink>
#2. Button with an icon/picture as a background. So one see a description like "New" and the picture of icon in background.
<p:commandButton value="New!" styleClass="ui-back-but-new"/>
and respectively in css:
.ui-back-but-new{
background: url("#{resource['images/new_create.png']}") no-repeat top left !important;
}
#3. Button with an icon placed left to its description (value attrib).
<p:commandButton value="New" icon="ui-but-new-icon"/>
and respectively in css:
.ui-but-new-icon{
background-image: url("#{resource['images/new_create.png']}") !important;
}
The problem was...:
All my problems came from wrong path to the icon image. It is probably the most frequent mistake. I have coded it as images/new_create.png in css statements. Structure of folders was /resources/images/new_create.png.
The proper path could be given in a three ways:
- url("#{resource['images/new_create.png']}")
- url(../resources/images/new_create.png)
- url(/MyAppName/resources/images/new_create.png)
The effect #1, #2, #3:
