Blog post arrow button

Hey FamalcoGroup,

Thank you for the inquiry.

Try to add this css code to hide the text and replace the icon with a different arrow.

.more-link {
    color: #ffffff;
}

.more-link .more-link-arrow {
    color: gray;
}

.more-link-arrow:after {
    color: gray;
    content: "";
    font-family: 'entypo-fontello';
    font-size: 20px;
    left: -75px;
    position: relative;
}

If you want to completely remove the text, try to add this script in the functions.php file.

function ava_script_read_more_arrow() { ?>
<script>
(function($) {
    $(".more-link").html("<span class='more-link-arrow'></span>");
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_script_read_more_arrow');

Best regards,
Ismael

Hi,

Thank you for the update.

Did you add the css code in the Quick CSS field and the script in the functions.php file? Please post the site details in the private field so that we can check the modification. Make sure that the Appearance > Editor panel is accessible. And please do not forget to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael

Hi,

Thank you for the update.

We moved the css code in the Quick CSS field and added this css code to remove the blue background and border of the read more button. We also adjusted the position of the arrow and increase its font size.

.html_elegant-blog .more-link-arrow {
    display: block;
}

.html_elegant-blog .more-link {
    border: none;
    background-color: transparent;
    color: #ffffff;
}

Please make sure to purge the cache before checking the page.

Screenshot: https://imgur.com/dbMA6uJ

Best regards,
Ismael

Hi,

Glad to know that it is working. To adjust the icon to your preferred arrow, try this css code.

.more-link-arrow:after {
    content: "\E88d";
}

Best regards,
Ismael