JSF commandLink with image

Question

I have problem with <p:commandLink> . I want make hover effect but I can't load image to <p:graphicImage> via CSS.

CSS:

.accountEditBtn {
    background-image:
    url('#{request.contextPath}/resources/image/pencil_black.png');
}

JSF:

<p:commandLink
    update="@form"
    actionListener="#{someBean.someListener}">
    <h:graphicImage styleClass="accountEditBtn" />
</p:commandLink>

I see empty rectangle with border.

But when I add alt to graphicImage, I get image over text from alt...

Where my mistake? Thank you. ps typing error - classType -> styleClass

Answer 1

try using styleClass instead of <h:graphicImage>

<p:commandLink 
   styleClass="accountEditBtn"
   update="@form"
   actionListener="#{someBean.someListener}"/>

try this class

.accountEditBtn { background-image: url('../resources/image/pencil_black.png'); }

BTW

isn't is should be images ? or it is image (folder name)

take a look at this as well.. in case you want commandButton with image: PrimeFaces icons

Answer 2

Why don't you use

<p:commandButton ... icon="yourbuttonstyleclass"/>

and in css

.yourbuttonstyleclass {  
background-image: url('../images/yourimage.png') !important;
}