如何在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 。 看到这个 。 如果操作正确，则至少会看到默认图像消失。

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

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;
}

还要检查背景图像超链接是否正确。