How to Add an Icon to an Image Card in Squarespace

CSS

Aug 10

Want to add a little sparkle to your image cards? I’ve done that… literally. In this tutorial, you’ll learn how to add an icon above the title of an image card.

Step 1. Create an Image Card

Click on an insertion point and choose an Image Block. Then, in the Design tab choose the Card layout.

Upload the image you want to use in the Content tab, then click on the card itself to add your Title and Description. When you are finished, SAVE your work.

Step 2. Create an Icon

Next, we’ll need an icon file to add. My favorite sites to source icons are The Noun Project and Flaticon. You’ll want to add any color to the icon before downloading, then download a transparent png format file. I typically choose the 512px size. We’ll resize the icon in our code so it will display smaller on our website.

Step 3. Load the Icon onto your Website

Since we are adding this icon using code, rather than in an image block, we’ll want to add it as a custom file. Go to Design > Custom CSS and click the Manage Custom Files button at the bottom. Then upload your icon png file.

Step 4. Add custom css

Next, paste in this code into the Custom CSS box:

.design-layout-card .image-title::before {
    content: url();
zoom:20%;
    visibility: visible;
  display: block;
}

You’ll notice that we are missing the URL. Place your cursor and click between the open and closed parenthesis after url in the code. Then click MANAGE CUSTON FILES again and click on your image. This will automatically add the image url to your code, so you’ll have full code that looks like the image above.

Adjust the zoom to change the size of your icon.

The code above adds your icon to every image card on your website, but you can target just one image block using a Block-ID.

Step 5. Target a block in custom css

If you’d like for the icon to show up on just one image card, you’ll need to adjust your code to only apply to one block. To find the Block ID, I use the Squarespace Collection/Block Identifier extension in my Chrome browser. Here’s a quick walkthrough:

After you have your unique block ID, you’ll add it to your Custom CSS. Replace #your-unique-block-id-here with the Block-ID you found using the extension.

#your-unique-block-id-here .design-layout-card .image-title::before {
    content: url();
zoom:20%;
    visibility: visible;
  display: block;
}

Other image block styles

You can use the same framework to add an icon to other image block styles that contain an image tile. Swap out .design-layout-card with the following classes:

Poster: .design-layout-poster
Overlap: . design-layout-overlap
Stack: .design-layout-stack
Collage: .design-layout-collage