Home Forums Free Themes Photo Perfect Change Font-Awesome arrows (links to next posts)

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2606
    Mr.Homes
    Participant

    Hi there,

    I want to change the default arrows which lead to the previous/next posts. I managed to get to the font-awesome.min.css and change the long-arrow-left and long-arrow-right icon to a png file.
    .fa-long-arrow-right:before{background: url("URL TO THE PNG") no-repeat scroll 0 0 rgba(0, 0, 0, 0);content: "";height: 43px;position: absolute;width: 234px;}
    The problem is that, while the left arrow is positioned very well, the right arrow is aligned outside the content box and not inside. Changing something like background-position-x:-50px crops the picture. Screenshot of the problem

    Could someone tell me what I am missing?
    Thanks in advance
    Mr.Homes

    #2634
    wensolutions
    Keymaster

    Hello @Mr.Homes,
    We recommend you not to edit the core css file. All the changes you made will be gone once the theme is updated. The correct way of modifying CSS file is either by creating a child theme or using Custom CSS.

    Our Theme supports Custom CSS so you needn’t create a Child theme. From Admin, Go to Appearance -> Customize -> Theme Options -> Advanced Options -> Custom CSS. Now inside Custom CSS box put the following code:

    .fa-long-arrow-left::before {
     content: url(http://wensolutions.com/themereview/wp-content/uploads/2016/02/pointer.png) !important;
    }
    .fa-long-arrow-right:before{
     content: url(http://wensolutions.com/themereview/wp-content/uploads/2016/02/pointer.png) !important;
    }

    You should replace the image path provided above with your site’s image path using Media Libarary. For reference you can see the attached image:
    Image Url from Media Libarary

    Let us know how it works.
    Regards.

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