Insider Posted September 15, 2021 Share Posted September 15, 2021 Hi all, Does anyone have a way of inserting icons or images in excerpts? I want my excerpt to include information looking like this. https://projectsinsider.com/project/3-rubida-court-endeavour-hills lifeisgood Thanks! Link to comment
tuanphan Posted September 15, 2021 Share Posted September 15, 2021 Hi, What is access password? Which plan do/will you use? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Insider Posted September 15, 2021 Author Share Posted September 15, 2021 2 hours ago, Insider said: lifeisgood Business Plan Link to comment
tuanphan Posted September 16, 2021 Share Posted September 16, 2021 On 9/15/2021 at 11:20 AM, Insider said: Business Plan Hi, I see icons here? DId you solve problem? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Insider Posted September 16, 2021 Author Share Posted September 16, 2021 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. This is where I enter information into the excerpt. How do I get icons in there? Thanks for looking into it @tuanphan! Link to comment
iamdavehart Posted September 16, 2021 Share Posted September 16, 2021 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 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). tuanphan 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment