“Read More” Text + Icon

There’s a few ways of doing this, but perhaps the easiest is to use custom CSS to override the Read More label already there (but hidden for screen readers). It also depends on which blog style you are using.

Example Overide:

.blogstyle1 span.screen-reader-text {
    width: 100px;
    height: 20px;
    clip: auto;
}

That is if you are using the first blog style, but change it if you are using another. It also greatly depends on if you are using excerpts for your summaries. IF so, then things will get a lot more messier/complicated to overide it.

I have not solved. If I insert the link you can help better?

What is the link to your website?

https://goo.gl/tOIXj9

Thank you

This should do it…

.blogstyle3 .more-link .screen-reader-text {
    clip: auto;
    width: 140px;
    height: 20px;
    margin-left: 6px;
}

The key was to know what the blogstyle was…yours is set to blogstyle3. The code will make the screen reader text be visible next to the icon. Only problem though is that it would be very difficult to get it to float on the left side of the icon. To do that, then you would need to switch to using a child theme and then edit the theme file where that is. A bit of work though.

• This reply was modified 7 years, 10 months ago by Shaped Pixels.

Thank you for your help!