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

Help - how to create a list of services/features/products with an icon on top?

Recommended Posts

Hi,

 

I'm trying to create a list of services with an icon on top and text under the icon, like the attached image (that’s https://www.aesopwines.com/)799560672_Screenshot2020-05-22at21_01_24.thumb.png.9d34d7e48990fd4a9c91929e6033835d.png 

How can I do this? If I insert an image the icon expands. Also, if I insert an image and a text block below it wouldn't behave properly on mobile.

Whats the best way to do this? Whats the best module for this?

(I'm using the Basil template, in case that helps)

Can you please help?

 

Kind regards,

 

Fabian

Share this post


Link to post

Thank you so much tuanphan! That works great! :)

Is there any way I can do that with icons from thenounproject.com or from flaticon.com? I guess that would mean to insert an image. Is ther a way to do this through markdown or through the code block so they would show up in a similar way as you put it on your page for Icon Boxes 02?

Share this post


Link to post
On 5/22/2020 at 9:06 PM, Fabians said:

I'm trying to create a list of services with an icon on top and text under the icon, like the attached image

You can also do this with any image file. To do this:

  • Add three Image Blocks and place them side-by-side to create three columns.
  • Size the icons to the required size before you upload them to the Image Blocks.
  • If the icon is narrower than the content area (as it is in the example you provided) then you will see the required blank space on both sides of the image. This preserves the original image quality. 
  • Add a Text Block below each icon for the associated text. 

 

spacer.png


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Thank you Paul! That worked great! I thought that wouldn't preserve the right order in mobile (I thought that would put the 3 images first and than the 3 text blocks), but I was wrong. I must have done some mistake when I tried it the first time! Problem solved, thank you! This works great for the image icons I intend to use and tuanphan's way is a great alternative for the other items. Thank you! 🙂

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...