Primefaces数据表取代了分页按钮图标

Question

我需要有关Primefaces数据表分页按钮的帮助。我用FontAwesome图标替换了分页按钮上的图标。这是我为其中之一所做的CSS示例（我以相同的方式修改了其他人）：

div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev {
    text-indent: 0;
}

div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev::before {
    font-family: FontAwesome;
    content: "\f048";
}

刷新页面后，我注意到图标已替换，但是现在每个Font Awesome图标（F，P，N和E）的右侧都出现了一个新字符。

我认为它必须与 N 表示 Next ， P 是 Previous ， E 是 End ，而 F 是 First 。我的日历组件遇到了同样的问题，我修改了locales.js来解决该问题。如果可能的话，我也想删除这些分页字符。

我该怎么做？

是否也可以将（1 of 150）修改为我的区域设置语言？

编辑1

替换后的HTML如下所示：

如上所述，仅使用不同的选择器，使用相同的css程序删除了旧图标。我没有为此使用任何自定义分页器，仅使用默认的Primefaces数据表分页。

我的DataTable xhtml标记是：

<p:dataTable id="DTableA" var="dataObject" value="#{dataTableBean.objectList}" paginator="true" rows="10" rowKey="#{dataObject.id}" 
             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" 
             rowsPerPageTemplate="5,10,15,25,50" reflow="true">

编辑2

以下@Jasper de Vries回答未能解决我的问题，因为发布的答案有些过时。主选择器对于Primefaces 6.2不正确。

请参阅以下选择器：

.ui-paginator > span:before, .ui-sortable-column-icon:before {
    font-family: FontAwesome; color: #fff;
}

.ui-paginator> span：before 不正确。对于Primefaces 6.2，应为 .ui-paginator> a：before 。

我还必须用以下替换建议答案中的排序插入符号图标：

.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before {
    content: "\f0d8";
}

.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before {
    content: "\f0d7";
}

并调整大小：

.ui-sortable-column-icon {
    height: 20px;
}

问题的第二部分

  

是否可以将（1 of 150）修改为我的语言环境语言   好吗？

尚未回答。

Answer 1

解决方案

我终于弄清楚了我写这样的css时发生了什么：

div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev {
    text-indent: 0;
}

div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev::before {
    font-family: FontAwesome;
    content: "\f048";
} 

应该将分页的每个图标替换为<a>标记内的FontAwesome图标，而不是像我一样在<span>标记内。

有趣的是，Primefaces的图标类放置在<span>标记内，让我感到困惑的是，我认为图标被放置在其中。相反，它实际上是我试图隐藏的文本的包装标签，默认情况下该文本已被隐藏。将文本缩进设置为0并在该特定范围内添加图标会显示隐藏的文本。

<a href="#" class="ui-paginator-next ui-state-default ui-corner-all" aria-label="Next Page" tabindex="0">
    <span class="ui-icon ui-icon-seek-next">N</span>
</a>

修改过的选择器可以解决这个问题。 @Jasper de Vries提供了样本CSS。我编辑过的用于分页的CSS如下：

.ui-paginator.ui-paginator-top.ui-widget-header.ui-corner-top,
.ui-paginator.ui-paginator-bottom.ui-widget-header.ui-corner-bottom,
.ui-paginator a,
.ui-paginator a:hover {
    background: none;
    background-image: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}

.ui-paginator > a {
    width: 32px;
    height: 32px; 
}

.ui-paginator a,
.ui-paginator a:hover {
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 3px 0px 0px 0px;
    color: #fff;
}

.ui-paginator a {
    background-color: #1E88E5;
}

.ui-paginator a:hover {
    background-color: #1565C0;
}

.ui-paginator a,
.ui-sortable-column-icon:before {
    font-family: FontAwesome;
}

.ui-sortable-column-icon.ui-icon {
    background-image: none; 
    text-indent: 0;
    margin: 0 0 0 .5em;
    height: 20px;
}

.ui-paginator span span, 
.ui-paginator a span { 
    display: none; 
}

.ui-paginator .ui-paginator-first:before { 
    content: "\f048";
}

.ui-paginator .ui-paginator-prev:before { 
    content: "\f04a";
}

.ui-paginator .ui-paginator-next:before { 
    content: "\f04e";
}

.ui-paginator .ui-paginator-last:before { 
    content: "\f051";
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n,
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s {
    margin: 0px 0px 0px 0px;
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n {
    top: -2px;
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s {
    top: 4px;
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:before { 
    content: "\f0dc"; 
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before {
    content: "\f0d8";
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before {
    content: "\f0d7";
}

感谢@Jasper de Vries和@Kukeltje的帮助。