Archived topic

nav-previous and nav-next arrow styling

7 replies · Started by Robert on January 9, 2018

Viewing posts 1–8 of 8

January 9, 2018 at 4:43 pm #467090

I found Tom's code which puts the previous and next links on a single line. How would I get the next arrow to float all the way to the right of the next link? And how would I change the arrow to some other character?

.post-navigation .nav-previous {
    float: left;
}

.post-navigation .nav-next {
    float: right;
}

January 9, 2018 at 10:40 pm #467260

You can move the arrow like this:

.nav-next .next:before {
    display: none;
}

.nav-next .next:after {
    content: "\f105";
    font-family: FontAwesome;
    padding-left:10px
}

You can change the arrow to something else using the content CSS attribute. What are you hoping to replace them with?

January 10, 2018 at 5:27 am #467453

Let's say I want to use fa-caret-left and fa-caret-right...

January 10, 2018 at 10:21 am #467795

Try this:

.nav-next .next:after {
    content: "\f0da";
    font-family: FontAwesome;
    padding-left:10px
}

.nav-previous .prev:after {
    content: "\f0d9";
    font-family: FontAwesome;
}

January 10, 2018 at 10:46 am #467809

Thanks!

January 10, 2018 at 11:23 am #467834

You're welcome :)

February 8, 2018 at 7:41 am #491390

Perfect!! Just what I was looking for! And the arrow all the way to the right, yes.
Happy :-)

February 8, 2018 at 9:35 am #491463

Glad you are able to find the answer through our forum :)

This archived topic is closed to new replies.

Start building better websites today.