Extra comes with a post rating system which lets your readers rate your posts by clicking on star icons. If you’d like to replace the star icons with your own image icons, here’s how to do it.
This is how the star icons look by default:
To use your own images, simply add the following CSS to your site, replacing the icon URLs used here with the URLs of your own icon images:
#rating-stars .rating-star {
width: 0;
height: 0;
padding: 16px 16px;
background-size: cover;
background-color: white !important;
background-repeat: no-repeat;
background-size: cover;
}
#rating-stars .star-on {
background-image: url('https://yoursite.com/star-on.png');
}
#rating-stars .star-half {
background-image: url('https://yoursite.com/star-half.png');
}
#rating-stars .star-off {
background-image: url('https://yoursite.com/star-off.png');
}
You can add this to Extra at:
Extra > Theme Options > General > Custom CSS
Here’s an example of the result – I’ve replaced the stars with emojis:
Attribution: Emoji icons by Vectors Market and Vitaly Gorbachev from Flat Icon