[Support request] Can I add an icon to the read more button?

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Can I add an icon to the read more button?

Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #29345
    Ema
    Participant

    Hello,

    I’m looking to add a little arrow to the ‘read more button’ on show posts. Can this be done?

    Best Ema

    #29390
    elvin
    Moderator

    Hi Ema,

    You can use wpsp_read_more_output to change how the read more button is displayed?

    Can you provide us any mockup image/s of how you want the read more button to display?

    Let us know.

    #29402
    Ema
    Participant

    Hello Elvin,

    Thanks for getting back to me.

    Would be like this – just using one of the general arrows from GP Blocks

    #29419
    elvin
    Moderator

    Do you have the SVG file or the fontawesome icon code?

    If you can get the specific icon we can help you with the code write up.:)

    #29447
    Ema
    Participant

    Hi Elvin,

    Thank you!

    it’s this one

    <svg aria-hidden=”true” role=”img” height=”1em” width=”1em” viewBox=”0 0 256 512″ xmlns=”http://www.w3.org/2000/svg”><path fill=”currentColor” d=”M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z”></path></svg>

    Ema

    • This reply was modified 3 weeks, 5 days ago by Ema.
    #29467
    elvin
    Moderator

    You can add this PHP snippet:

    add_filter( 'wpsp_read_more_output', function( $output, $settings ){
        return sprintf('<div class="wpsp-read-more"><a title="%1$s" class="%4$s" href="%2$s">%3$s
            <span class="read-more-icon">
                <svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
            </span>
            </a>
            </div>',
                the_title_attribute( 'echo=0' ),
                esc_url( get_permalink() ),
                $settings[ 'read_more_text' ],
                esc_attr( $settings['read_more_class'] )
        );
    },15,2);

    And then add this CSS to align properly:

    .wpsp-read-more a,
    .wpsp-read-more a span.read-more-icon {
        display: inline-flex;
        align-content: center;
        align-items: center;
    }
    #29548
    Ema
    Participant

    hello Elvin, thanks so much for helping me with this. do I add to elements – hooks? I added to snippets and it created a critical error?

    best Ema 🙂

    #29569
    elvin
    Moderator

    For the PHP part, you add it to a child theme’s functions.php or Code Snippets plugin.

    The CSS is added on Appearance > customize > additional CSS.

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