如何在Primefaces Breadcrumb中更改主页图标？

Question

我想用另一个图标更改Primefaces Breadcrumb的主页图标，但我找不到。

我尝试使用CSS，但它不适用于图标：

.ui-breadcrumb {
    background: none !important;
    border: none !important;
    icon: url('resources/images/look/bandeau.png')
}

Answer 1

应该足够了：

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

但你必须确定两件事：

• 首先，你正确地覆盖了primefaces css，你不应该需要!important。见this。如果你做得对，至少你会看到默认图像消失。

• 其次，您必须确保正确引用图像。在我的代码中，我展示了自己如何做，但这取决于您的配置，因此您还应该检查this。

Answer 2

尝试通过这样做来定位该特定图标：

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

同时检查背景图像超链接是否正确。