如何更改 Primefaces 面包屑中的主页图标？答案

【问题标题】：How to change the Home icon in Primefaces Breadcrumb?如何更改 Primefaces 面包屑中的主页图标？
【发布时间】：2014-10-06 15:32:36
【问题描述】：

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

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

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

【问题讨论】：

标签： css jsf jsf-2 primefaces

【解决方案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。

【讨论】：

您好 mrganser，它正在工作，感谢您的帮助以及有关 CSS 和 Primefaces 的链接。但是我认为我必须保留默认的主页图标，就像我替换它一样，这个地方非常非常小，我需要减少很多我想要的图像的大小。
不客气。是的...以我为例，我最终从头开始创建了一些 16x16 图标。

【解决方案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;
}

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

【讨论】：

我刚试了下还是不行，图标还是首页图片。