Before WordPress I'm running my blog on Google Blogger and everything very easy to customize for me. When I turn to self hosted WordPress blog it's not very easy for me. But as fact when you spent your time on reading surly you will never disappoint, as above my small learning I discover a small trick how to replace read more text with image in WordPress.
Change read more with Image in WordPress Using Css Only:
There is lot's of way you can find on internet but hardly find easiest way to do. May be you can find to edit text method using language.po editing, but I personally never find it truly useful.
I'm going to tell you eaiset method to change read more text with image in WordPress using css only.
Let's start:
- Open your WordPress blog or website on Chrome and right click on read more text and Inspect Element.
- Find class running behind 'Read More' text or as on your blog. To clear out see below image-
Copy class name, as above image class name is read-more-link , now go to WordPress admin dashboard > Editor.
Open Stylesheet (style.css) and paste below code in last line of style.css file.
.read-more-link { font-weight: bold !important; color: transparent !important; background: url("Image URL") no-repeat left center !important; width: 130px !important; }
Change Image URL and width as per your requirement.
When everything will done, refresh your page and you can find your WordPress read more text replaced with image.
Trick Explanations: Actually I'm not replacing read more text, I only applied background image behind read more text and make it's color transparent.
I'm using !important tag to over right existing class running with same name.
All things I done only to make this trick simply and handy,That's all !.