PrimeFaces custom menu icon not rendered

Question

I'm on a process of developing a JSF application which uses PrimeFaces component library as well. I wanted to apply some menubar component in my application; however, the icon that I created couldn't get rendered. In PrimeFaces documentation, it is stated that for custom icon I should have a css class. I created the css with an image and feed it to the menubar icon attribute but it didn't work. The following is my css.

.mainPageIcon {
    background: url(/images/motorStop.png) no-repeat;
    height: 16px;
    width: 16px;
}

<p:menubar>
     <p:menuitem icon="mainPageIcon" value="mainPage"/>
</p:menubar>

What should I do for the matter?

Answer 1

In Primefaces, to use a CSS class, you use the attribute styleClass. It is equivalent to class in Html. So,

 <p:menuitem styleClass="mainPageIcon" value="mainPage"/>