【发布时间】：2019-04-20 10:00:47
【问题描述】：
我需要一些有关 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
旧图标已被删除，如上所述，相同的 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) 修改为我的语言环境为 好吗？
还没有回答。
【问题讨论】：
-
您检查过它们来自的 html 吗？你不能用css隐藏它们吗？您是否删除/隐藏了其他图标？
-
@Jasper de Vries，感谢您的帖子，但不幸的是，您的主要 css 解决方案不适用于我的情况。字符保留在包装器中，并且在尝试使用您的 css 时根本不会显示分页图标。
-
@c00ki3s: 然后更改/改进选择器
-
@Kukeltje，抱歉耽搁了。我的问题的第一部分已得到解答，我将指出 css 中的哪些更改在我的下一个和最终编辑中隐藏了那些不需要的字符。我在早上 00:30 写了我的最后一次编辑。我将在今天晚些时候完成我的帖子。不幸的是，我住的地方周日效率低下。
标签： primefaces