更改 primefaces 日历上的样式和图标

Question

我正在尝试更改 primefaces 日历上的默认样式并尝试了很多解决方案，但仍然不知道如何更改它。例如我想更改按钮图标。

这是我的 .xhtml 文件中的日历：

<p:calendar id="date_to"  showOn="both" value="#{WebClient.date_to}" pattern="yyyy-MM-dd HH:mm:ss"/>

这是我到目前为止尝试过但没有成功的解决方案，仍然是相同的默认日历。

不起作用解决方案 1：

.ui-icon-calendar {
    background-image: url("../images/calendar.png") !important;
    background-position: center center !important;
    width: 16px;
    height: 16px;
}

解决方案 2 不起作用（使用 chrome 和复制元素类）

.ui-button-icon-left .ui-icon .ui-icon-calendar {
        background-image: url("../images/calendar.png") !important;
        background-position: center center !important;
        width: 16px;
        height: 16px;
    }

解决方案 3 不起作用（发现这可能是按钮并尝试更改其背景）

.ui-datepicker-buttonpane{
    background: #00CCFF !important;
}

如果有人有一个如何更改默认值的工作示例（更改按钮图标、更改颜色等），请与我分享。

Answer 1

我怀疑主要问题是图像文件的位置。我让 CSS 与以下内容一起工作：

.ui-icon-calendar {
    background-image: url("#{resource['images/calendar.png']}") !important;
    background-position: center center !important;
    width: 16px;
    height: 16px;
}

注意：您的图像应位于 "/webapp/resources/images/..".

下的文件夹中