Jump to content

How to make a legend with icons

Recommended Posts

  • Replies 7
  • Views 596
  • Created
  • Last Reply

Hi,

You can use Image Block, then share url, we can give the code to resize images.

Or you can also Add a Code Block >> Paste this code

<div class="t-recipe">
  <img src="https://cdn.pixabay.com/photo/2021/02/03/20/06/hot-air-balloon-5979187__340.jpg" width="50px"/>
  <span> Title 01</span>
</div>
<div class="t-recipe">
  <img src="https://cdn.pixabay.com/photo/2021/02/03/20/06/hot-air-balloon-5979187__340.jpg" width="50px"/>
  <span> Title 02</span>
</div>
<div class="t-recipe">
  <img src="https://cdn.pixabay.com/photo/2021/02/03/20/06/hot-air-balloon-5979187__340.jpg" width="50px"/>
  <span> Title 03</span>
</div>

 

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
15 hours ago, Lokita said:

I used the code block and right now the text is aligned to the bottom, how do I make the text aligned to the center of the icons?  Much appreciated.

Capture.JPG

Can you share link to page where you added code? We can tweak the code easier

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
15 hours ago, Lokita said:

Sure, I just added it to an old post at the bottom of the page.

 

https://www.slicedginger.com/home/superfood-fruit-leathers

Add this into Code Block

<style>
  .t-recipe * {
    vertical-align: middle;
    margin-right: 10px;
}
  .t-recipe {
    margin-bottom: 10px;
}
</style>

 

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

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.