How to change the Home icon in Primefaces Breadcrumb?

Tags: css,jsf,jsf-2,primefaces

Problem :

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')

Solution :

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.

    CSS Howto..

    how to make those two divs in one line

    Keyboard Showed messed up elements' position

    How to run a different html file when device width changes?

    How to remove blue highlight when you hold on input buttons in css? [closed]

    How to set relative url for a css file in Django

    How to make header/body/footer 'popup' div with variable height body?

    show the div inside that div next to it

    Sub menu wont show when menu item hovered over (css html)

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How to remove line break after DIV in CSS

    How to line up lists side by side?

    How to place two labels around an image (dynamically); right and bottom?

    Browser sizing Ctrl +/- :: How to manipulate settings?

    AngularJS / CSS - How to set the width of a select box to a value from $scope?

    How to Change Elements Before & After Navbar Collapse?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How to select multiple items using mouse click?

    How to position contents according to zoom level?

    How do I center my content inside the menu?

    Any idea how to add this sinking hover effect to an image/link?

      navigation - how to vertical align contents of

    How do I get this list to be seperated by a tab? (HTML/CSS)

    How to fluid images when resize window?

    Bootstrap progress bar with gradient color showing proportionally on active width

    how do I select second submit button to imply other color

    CSS Question: How to prevent background from being affected by padding?

    How do I add another css to Bootstrap?

    How can I add value to textbox, instead of setting value

    How to force CSS3 slideshow animation to display in correct order?

    How can I make my Div box holder look like this inside with CSS?