0

i want to create an new icon to use in my p:commandButton but i failed i used this methode

PrimeFaces: how can I make use of customized icons?

but didnt work for me . i will show you my code :

CSS CODE :

.img-button-help { background-image: url('img/mag.ico') !important; }

jsf CODE :

<p:commandButton icon="img-button-help" value="test" />

result : enter image description here new result ->enter image description here

how to use customed icons in Primefaces ??

Community
  • 1
  • 1
marouanoviche
  • 253
  • 4
  • 11
  • 28
  • Looks like there's no image found, thus there's no icon to display. Using Chrome or Firefox with Firebug installed, press F12 and see if you can access to this icon in the Resource section. – Luiggi Mendoza Oct 25 '13 at 15:39
  • i think the image is founded but not showen or adapted for p:commandbutton – marouanoviche Oct 25 '13 at 15:46
  • Are you sure the image is found? Have you verified if can be accessed from your site? One way to verify it is using the approach I explained in my comment above. Here's the documentation for Chrome: https://developers.google.com/chrome-developer-tools/docs/resources – Luiggi Mendoza Oct 25 '13 at 15:48
  • i didnt find it in image folder in googlebug but when i write the url that i know in google i can see the image. – marouanoviche Oct 25 '13 at 15:54
  • Then the problem is that the image isn't found (as I guessed). It would be better if you place all your resources inside a `resources` folder as explained here: http://stackoverflow.com/q/11988415/1065197 – Luiggi Mendoza Oct 25 '13 at 16:09

2 Answers2

1

Hi you can try to add the background-position to your css because primefaces images are based on sprites and what .img-button-help does is set a positon. Try this:

.img-button-help { 
   background-image: url('img/mag.ico') !important;  
   background-position: center !important;
}
DaniP
  • 37,813
  • 8
  • 65
  • 74
0

i found a solution to this problem inspriring by Danko i created a small icon and i put it as background in the left

<p:commandButton value="test" style=" padding-left: 15px;background-image: url('img/mag.ico') !important;background-repeat: no-repeat;background-position: left;" />

now i have it as an icon with using an the icon of primefaces .

marouanoviche
  • 253
  • 4
  • 11
  • 28