Adding Custom Icons To Blog Thumbnails
While thumbnails do a great job showcasing the main subject of each post, sometimes you want to communicate additional information at a glance. Maybe you want to highlight your deep-dive tutorials, mark posts that include downloadable resources, or indicate which articles feature video content.
That's where custom icons come in. By adding small, strategic visual indicators to your thumbnails, you can help readers quickly identify the type of content they're looking for without cluttering your design. Think of them as subtle signposts that enhance your blog's user experience.
The Code
We can use CSS's powerful :has() selector combined with ::after pseudo-elements to add custom icons to specific blog post thumbnails. Here's how:
.blog-item div:has(.image-wrapper[href="/blog/clickable-list-section-images"])::after {
content: '';
background-image: url('your-icon-url.jpg');
background-size: contain;
position: absolute;
top: 10px;
right: 10px;
height: 20px;
width: 20px;
}
Now lets break down how this works:
1 - The Selector
First up, we've got this fancy selector: .blog-item div:has(.image-wrapper[href="..."]). This is targeting a div (that annoyingly doesn’t have its own class but is what contains the thumbnail) within a .blog-item in our grid that has a specific href. Its the href value that lets us determine which specific blog post we’re targeting.
2 - The ::after Pseudo Element
We’re creating the ::after pseudo element to house our symbol, and as we don’t want any written content in this element we’re leaving the value of the content property blank.
3 - Adding In The Symbol
The background-image property is where we add in the symbol. If you aren’t sure how to upload this and grab its url I go over this in the Squarespace CSS Course.
When we set the background-size property to ‘contain’ we're telling our icon "fit yourself completely inside your box, and keep your proportions perfect".
4 - Positioning The Symbol On The Thumbnail
When we set position: absolute, we're telling our icon "Hey, break free from the normal document flow!" It's like giving our icon a jetpack - it can now float freely relative to its closest positioned parent element (which should be our blog thumbnail).
The top and right values are like GPS coordinates for our icon. "10 pixels from the top, 10 from the right" we say, and there it stays, perfectly positioned in its corner.
5 - Symbol Size
Adjust the width and height properties to your liking.
Targeting All Posts Of The Same Category
Rather than individually targeting each blog post you may want to add the same icon to all posts that have the same Category. To do this the Category will need to be toggled on to be shown in the metadata.
.blog-item div:has(.blog-catagories[href="/blog/category/CSS+Tricks"])::after {
content: '';
background-image: url('your-icon-url.jpg');
background-size: contain;
position: absolute;
top: 10px;
right: 10px;
height: 20px;
width: 20px;
}