Plugin to add images to text block?

Hi, I've been trying to replicate what you can see in the attached screenshot, with the icons inline with the text. Placing an image block by the text doesn't work, as they go out of alignment when the browser window is re-sized. I found some CSS for the job here https://insidethesquare.co/squarespace-tutorials/image-in-text but have had issues with the icon being cut off / not appearing / being too close to the text. I'd be quite happy to pay for a plugin for a no fuss solution - can anyone recommend one? I've been in touch with the designer who created the linked website with the example I'm trying to emulate, and she says she did it in Elementor. 

I'd also be up for any other solutions anyone might have! I see this done so often there must be ways and means....

Many thanks,

Khechog

My ideal is

First, you add a Text Block > Enter Image url (here I used some random images on Pixabay)

and make sure enter same image url in url box

then use some code to turn image url to image, like this

see a demo: https://tuanphan3.squarespace.com/icon-next-by-text?noredirect

pass: abc

here is the code, you need to add it to Page Header Code Injection (DO NOT add to Custom CSS). Replace Text block id div#block....with your text block id. Use this tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div#block-yui_3_17_2_1_1701688774020_10266 a').each(function() {
  var $t = $(this);
  $(this).contents().filter(function(){ return this.nodeType != 1; }).remove();
  $t.attr({
      src: $t.attr('href')
    })
    .removeAttr('href');
   $(this).replaceWith(function(){
    return this.outerHTML.replace("<a", "<img").replace("</a", "</img")
});
  
});
 
});
</script>
<style>
div#block-yui_3_17_2_1_1701688774020_10266 img {
    width: 40px;
    margin-right: 10px;
}
  @media screen and (min-width:768px) {
  div#block-yui_3_17_2_1_1701688774020_10266 p {
    display: flex;
    align-items: center;
}
  }
</style>

Hi Tuan, I hope you're well. Maybe I'm doing something wrong, but the URL continues to show after everything's been added:

https://www.meditateinthewestmidlands.co.uk/classes-2024

That's worked, thank you. Is there a way to keep the icon small, the same height as the text? At the moment the icon fills the height of the text box which is taller than the text.

Reduce width, will reduce height

this code will make image - text same line (tablet + desktop only), if you want to make it run on all devices, change 767px to 1px

Incredible, thank you Tuan 🙂