Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to add icons in excerpts?


Insider

Question

5 answers to this question

Recommended Posts

  • 1

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

Link to comment
  • 0
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...