Next and Prev button icon-chevron-right and icon-chevron-lef

How can I control the span that is displaying a blank box to the left of the "Prev" button and "Next" button at the end of articles. I can turn off the Prev/Next buttons but cannot figure out where the span is coming from and why it is an empty box and not an arrow. The CSS appears to be Font Awesome but I didn't think News template came with Font Awesome installed. The code is:

Code: Select all

<span class="icon-chevron-left"></span>

and

Code: Select all

<span class="icon-chevron-right"></span>

I see there is a .pager class in the CSS but cannot even see where the icon-chevron is supposed to be styled.

Hi,
can you show me where did you saw that arrows -URL- demo is quite big to check all subpages.

I sent you a PM with the URL.

previous-next-capture.png

The capture image shows the problem. The orange is the default color background that remains, the red is a custom color for the site.

Ok,
start from that code:

ul.pager li { background: none !important;
float:left;
padding: 0 !important
}

and then
add

.pagenav-prev a, .pager li.previous a, .pager li.next a, .pagenav-next a, .pagination ul li a, .pager li a, .pager ul li, .pager li span, .pagination ul li span
{
margin: 0 5px 2px 10px;
padding:0;
padding-right: 15px !important;

}

Something must be missing. I still get an orange box which is obviously from the <span class="icon-chevron-left">. I pasted the following into my template's Custom CSS code field (BTW--you are missing a semi-colon at the end of the first block's line 3):

Code: Select all

ul.pager li {
   background: none !important;
   float: left;
   padding: 0 !important;
}

.pagenav-prev a, .pager li.previous a, .pager li.next a, .pagenav-next a, .pagination ul li a, .pager li a, .pager ul li, .pager li span, .pagination ul li span {
   margin: 0 5px 2px 10px;
   padding:0;
   padding-right: 15px !important;
}


Also, it's not a big deal to not have a forward/back arrow as your capture shows, but to me it looks like this version was intended to use Font Awesome for the arrows and the older template (which my client uses on another site) has a hard coded arrow (> or <). Your solution seems to be to just go without any arrows.

About arrows , you have at least few solution,
one of them will be using a Langauge Override and instead "Next" --> "Next >" etc.
Using a FontAwesome request much more work that we can offer by support.
About first, let me check your URL again...

From my last code please remove:
padding-right: 15px !important;
ops...my mistake.
then add under in new row:

.previous > a, .next > a {
padding-right: 15px !important;
}

That fixed the CSS, thanks.