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.

Answer 1

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.