Jump to content

How to add icons in excerpts?

Recommended Posts

  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply
2 hours ago, tuanphan said:

Hi,

I see icons here? DId you solve problem?

Excerpts meaning the thumbnail view, generally in summary blocks, of blog posts.

The icons you may be referring to seeing are actually inside my the <body> of my blog posts. 

I want the icons to be inserted within this view below in the excerpts.

image.thumb.png.02e4b158721feba0e5eafc18445db277.png

 

This is where I enter information into the excerpt. How do I get icons in there?

Thanks for looking into it @tuanphan!

image.png.09834bbc74fdcfc018888c07eb22c979.png

Link to comment

Here's a CSS only way.

you need some way to target them, so what I'd do is add your three things in a little bulleted list in your excerpt. then you can use css to target each one, using nth-child(1) to select the first (bedrooms), nth-child(2) to select the second (bathrooms) and nth-child(3) to select the parking spaces. the bulleted list option will come up in the formatting bar as you edit the excerpt

image.png.f47a816db5fb5189f1798ef8f81a9396.png

you could then add the following rules to your custom css section in the design menu. This would mean that this was applied to all blog excerpt lists though so you might want to inject it into the specific page if it's only for one place.

.blog-excerpt ul {
  padding:0;
  margin:1em 0;
  display:flex;
  justify-content:center;
}
.blog-excerpt ul li p:before {
    content:'' !important;
}
.blog-excerpt ul li {
  display:flex;
  padding-left:10px;
}
.blog-excerpt ul li:before {
  content:'';
  display:inline-block;
  width:20px;
  height:20px;
  margin-right:5px;
  background-size:cover;
}
.blog-excerpt ul li:nth-child(1):before {
  background-image:url(https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627148015221-PXBFEX5IBA1MCT1HHRQM/square-avatar.png);
}
.blog-excerpt ul li:nth-child(2):before {
  background-image:url(https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627148015221-PXBFEX5IBA1MCT1HHRQM/square-avatar.png);
}
.blog-excerpt ul li:nth-child(3):before {
  background-image:url(https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627148015221-PXBFEX5IBA1MCT1HHRQM/square-avatar.png);
}
  • the width and height of the image is set in the 4th rule (currently 20 x 20). you must set this to the correct aspect ratio and size of your icons.
  • change the image urls of the last three rules accordingly. You'll need to upload the icon files to your site. you can do that in the custom css section at the bottom (see here for help on that https://support.squarespace.com/hc/en-us/articles/206545567).

 

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.