How to make a legend with icons

Site URL: https://www.slicedginger.com

Hello, I use the icons with recipes denoting if they are vegan, gluten free etc., I want to make a recipe key/legend at the bottom of my post with icons.  If use the icons as images they are way too big.  

Looking to make something that looks like this

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>

Thank you so much!

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.

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.

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

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

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

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>

Worked, thanks so much!