Displaying command button with image only

primefaces commandbutton icon
commandbutton action
primefaces icons
primefaces button

I am trying to display a button with image only on my page but all I see is the button with ^. Following is the code for my button:

<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/> 
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode">  
    <ui:include src="lineSearch.xhtml"/>
</p:dialog>

The image does exist in the images folder. The button is rendered as following in the page:

<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab({formId:'j_idt23',source:'j_idt23:j_idt27',process:'@all'});return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span>
    <span class="ui-button-text">ui-button</span>
</button>
<script type="text/javascript">
    widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton('j_idt23:j_idt27', {text:false,icons:{primary:'backgroung-image:url(/images/title_logo.jpg)'}});
</script>

Thanks!!!

The image attribute has to refer a CSS class name, not a plain CSS property. So, this should do:

<p:commandButton image="someCssClassName" /> 

with the following in your CSS:

.someCssClassName {
    background-image: url(images/title_logo.jpg)
}

Please note that I fixed the major typo in property name and also removed the leading slash from the image URL, it would otherwise be resolved relative to the site's domain root; the above expects the title_logo.jpg to be inside an /image folder which in turn is in the folder where the CSS file resides.

However, this one is less clumsy, I think:

<p:commandLink action="#{bean.submit}">
    <h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>

html, <p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false"> class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"  Join a community of over 2.6m developers to have your questions answered on How to show image only button for Destroy command button of Kendo UI for jQuery Grid. New here? Start with our free trials.

I suggest to use "P:coomandLink" and "P:graphicImage" at the same time. I have created a folder under webapps, and put my jpg file under this folder. This code works fine for me. good luck.

<p:commandLink action="#{MyClass.myMethod}">
   <p:graphicImage value="images/Max-Burger.jpg"  />
</p:commandLink>

Need help to display an icon image in a command button, Just a basic need but cannot get it to work. I would like to have a primefaces button to display my image, without any text. But what i get is a button  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Put this on your css style:

    .dolar-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;}

Now you can use the icon "dolar-icon" that you defined in your css.

<p:commandButton action="#{as.fe}" icon="dolar-icon"/>

How to add background image and icon to a JSF b |JBoss.org , My Requirement is:- JSF button with Background image and a Icon <h:​commandButton action="discard" style="background-image: url('. i think you cant get what you want just with css. primefaces has a component  The ImageButton displays an image and responds to a tap or click that directs an application to carry out a particular task. The ImageButton view combines the Button view and Image view to create a button whose content is an image.

Even easier:

<p:commandButton icon="ui-icon-XXXXX">

Diferent icons you can choose: https://api.jqueryui.com/theming/icons/ and http://www.primefaces.org/showcase/ui/misc/fa.xhtml

Using Microsoft Excel 2002, 2 TOOLBAR BUTTON AND MENU COMMAND DISPLAY OPTIONS Display Option On a Toolbar , Displays . . . On a Menu , Displays . . . Default Style Image only  I am trying to display a button with image only on my page but all I see is the button with ^. Following is the code for my button: &lt;p:commandButton onclick="lineSearch.show();" image="backgroung-

Images on Command Buttons, You do not need to display a button image and can select only to display an image or only to display a text in the button. Supported image formats. The following  Displaying image from button command - Tkinter & PIL Images, and Exit Buttons Displaying Multiple Images with Matplotlib - Duration:

Microsoft® Office 2003 Bible, In the Picture area, you see an enlarged view of the button image, showing each This displays only the icon for a particular command (unless it has no  Description. How can I use the Edit, Delete, Update, Cancel, and Add buttons only with icons and without displaying any text in them?. Solution. Set command.text to a space.

Using Microsoft Office Excel 2003, Change buttons to display text only , for example , if Excel users are buttons , or if they have a difficult time remembering what command an image represents . Forms, reports, and image controls support all graphics. Command buttons and toggle buttons only support bitmaps. Buttons can display either a caption or a picture. If you assign both to a button, the picture will be visible, but the caption won't. If the picture is deleted, the caption reappears.

Comments
  • Did it really render backgroung-image?
  • @BalusC this is what it rendered: awesomescreenshot.com/0d9nm5ueb
  • Why did you edit the question to copy this incorrect style property in the image attribute?
  • What code do you really have (in XHTML file) and what did it really render? (in the HTML source)? Please do not edit the copypaste, you'll possibly remove the error without actually realizing it or even introduce new errors (like with your last edit).
  • @BalusC I am sorry for editing the code. This is actually what's there right now and what's rendered.
  • @Olivier: please read stackoverflow.com/questions/11988415/… for a related question on how to use JSF resources (this is what the name attribute is pointing to).
  • hum ok. In my case the name attribute did not work because I didn't create library associated to. Sorry for this bad edit BalusC
  • @Olivier: Apparently you didn't put it in /resources folder. The particular example in my answer expects the image file to be in /resources/images/title_logo.jpg.
  • Note that the image attribute has now been deprecated, use icon attribute instead.
  • @diegomatos-keke: VDL says otherwise primefaces.org/docs/vdl/5.3/core/primefaces-p/commandLink.html Or perhaps you really made a case sensitivity mistake, AJAX != ajax
  • That is only easier if you want an existing icon. If you want your own image (like the OP did) this does not work at all.
  • Just an easy way to do it