[Resolved] nav-previous and nav-next arrow styling

Home Forums Support [Resolved] nav-previous and nav-next arrow styling

Home Forums Support nav-previous and nav-next arrow styling

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #467090
    Robert

    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;
    }
    #467260
    Tom
    Lead Developer
    Lead Developer

    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?

    #467453
    Robert

    Let’s say I want to use fa-caret-left and fa-caret-right…

    #467795
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .nav-next .next:after {
        content: "\f0da";
        font-family: FontAwesome;
        padding-left:10px
    }
    
    .nav-previous .prev:after {
        content: "\f0d9";
        font-family: FontAwesome;
    }
    #467809
    Robert

    Thanks!

    #467834
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

    #491390
    blackbird

    Perfect!! Just what I was looking for! And the arrow all the way to the right, yes.
    Happy πŸ™‚

    #491463
    Leo
    Staff
    Customer Support

    Glad you are able to find the answer through our forum πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.