0

I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.

I tried with CSS but it is not working for the icon:

.ui-breadcrumb {
    background: none !important;
    border: none !important;
    icon: url('resources/images/look/bandeau.png')
}
chopper
  • 6,649
  • 7
  • 36
  • 53
Benusko
  • 97
  • 1
  • 13

2 Answers2

1

It should be enough with:

.ui-breadcrumb .ui-icon-home {
    background-image: url("#{resource['images/look/bandeau.png']}");
    background-position: 0; /* asuming bandeau.png is a single image */
}

But you have to make sure two things:

  • First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.

  • Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.

Community
  • 1
  • 1
mrganser
  • 1,113
  • 1
  • 13
  • 27
  • Hello mrganser, it is working, thank you for your help and the link about CSS and Primefaces. However I think I will have to keep the default home icon as if I replace it, the place is very very small and I need to reduce a lot the size of the image I wanted there. – Benusko Oct 07 '14 at 07:05
  • You're welcome. Yeah... in my case for example I ended up creating some 16x16 icon from scratch. – mrganser Oct 07 '14 at 07:20
0

Try to target that specific icon by doing so:

.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
    background: none !important;
    border: none !important;
    background-image: url('resources/images/look/bandeau.png') !important;
}

Also check if the background image hyperlink is correct.

João Colucas
  • 249
  • 1
  • 3
  • 14