Primefaces datatable replacing pagination button icons

Question

I need some help with Primefaces datatable pagination buttons. I'm replacing icons on pagination buttons with FontAwesome icons. Here is a CSS example what I did for one of them (I modified others the same way):

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

I refreshed my page and I've noticed that icons get replaced but now a new character appears on the right side of each Font Awesome icon (F, P, N, and E).

I believe it has to do something with locales where N stands for Next, P is Previous, E is End and F is First. I've had the same problem with the calendar component and I modified my locales.js to solve that issue. I would also like to remove these pagination characters if possible.

How can I do that?

Is it possible to modify the (1 of 150) to my locale language as well?

EDIT 1

Html after replacement looks like this:

Old icons have been removed as described above with the same css procedure only different selectors. I am not using any custom paginators for this, only default Primefaces datatable pagination.

My DataTable xhtml tag is:

<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">

EDIT 2

Following @Jasper de Vries answer didn't resolve my issue because the posted answer is somewhat deprecated. Main selector is incorrect for Primefaces 6.2.

See the following selector:

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

.ui-paginator > span:before is incorrect. Should be .ui-paginator > a:before for Primefaces 6.2.

Also I had to replace sorting caret icons from suggested answer with these:

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

and resize them:

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

And second part of my question

Is it possible to modify the (1 of 150) to my locale language as well?

hasn't been answered yet.

did you check in the html where they came from? Can't you hide them with css? Did you remove/hide the other icons? — Kukeltje
Possible duplicate of How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable? — Jasper de Vries
@Jasper de Vries, thank you for your post but unfortunately your main css solution does not work in my case. Characters remain in the wrapper and no pagination icons get displayed at all when trying to use your css. — c00ki3s
@Kukeltje, I'm sorry for the delay. First part of my question has been answered and I'll point out what changes in css hid those unwanted characters in my next and final edit. I wrote my last edit at 00:30 in the morning. I'll finish my post later today. Sundays are unfortunately less productive where I live. — c00ki3s

c00ki3s c00ki3s · Accepted Answer · 2018-11-19T18:46:53

SOLUTION

I've finally figured out what happened when I wrote css like this:

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

Each icon for the pagination should be replaced with a FontAwesome icon inside the <a> tag and not inside the <span> tag as I did.

It's interesting that the icon class by Primefaces is placed inside the <span> tag and it confused me to think that an icon is placed inside it. Instead it's actually a wrapper tag for text I tried to hide which was already hidden by default. Setting text indent to 0 and adding an icon to that particular span exposes the hidden text.

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

Modified selectors do the trick here. Sample CSS is available by @Jasper de Vries. My edited CSS for pagination goes like this:

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

Thank you @Jasper de Vries and @Kukeltje for your help.

Primefaces datatable replacing pagination button icons

1 Answers