[Resolved] Replace Previous / Next, and Read More with FontAwesome icons

[Shelby]

I am sure this is an easy task but I am not finding a solution. I wish to replace the Previous / next (https://shelby.d.pr/gXCBwb) with FontAwesome icons instead of words as well as “Read More” too.

GP Premium: 1.9.1
GP: 2.4.1

[David]

Hi there,

See the code here to change the Next and Previous link text:

https://generatepress.com/forums/topic/a-small-problem-with-the-page-number-section/#post-1005576

and there is a filter for the Read More text:

https://docs.generatepress.com/article/generate_excerpt_more_output/

In both instances you should be able to return the FA icon HTML instead of text.

[Shelby]

Hey David,

Thanks for that I was able to change the Prev/next but I can’t get the Read More to update at all. Also, one other thing to throw in the mix, how can I position Next to the right side rather than being right next to Previous? (https://shelby.d.pr/7KmqYf)

[David]

This CSS to float the Next link to the right:

.next.page-numbers {
    float: right;
}

Read more – lets give this a go instead:

add_filter( 'option_generate_blog_settings', function( $settings ) {
    $settings['read_more'] = $settings['read_more'] . ' <i class="fad fa-arrow-right"></i>';

    return $settings;
} );

This will display whatever the Customizer read more contains followed by the FA HTML .

[Shelby]

Hey David,

You, sir, are a saint! Thank you so much that works for what I am needing. Have a great day!

Thanks,

Shelby DeNike

[David]

You’re welcome

[Author]

Posts