Image alongside Headline Title on Accordion Block

Hi Can anyone tell me how to add an Image next to the Headline Title on Accordion List?

I am wanting to add different icons (small images) to each title on the list, to appear on the right of the Title and centred vertically in the Title (so each one lines up). Any help with correct code instructions would be great. 

All the forum searches just bring up image within the accordion after the expansion + appears.

I attach what I came up with in the screenshot, however the images are not part of the accordion - Something similar to this is what I am after.

(1) First, use this code to Website > Website Tools > Code Injection > Footer (or Page Header Code Injection, page where you use Accordion)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("span.accordion-item__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

(2) Use this code to Custom CSS box

span.accordion-item__title {
  display: flex;
  align-items: center;
}
span.accordion-item__title img {
  width: 20px;
  height: auto;
  margin-right: 10px;
}

(3) Edit Accordion Title, use this format

<img src="https://cdn.pixabay.com/photo/2023/12/22/09/51/ai-generated-8463482_1280.jpg"/>Accordion Item 1

Result

(4) To adjust icon size, change this

This works thank you!!!! however how do I change the image to my image? Does it need to link to a web page image? I am wanting it to link to one of the images uploaded to the site and have it inside a circle with white background.

On 4/21/2024 at 4:00 AM, Becs said:

This works thank you!!!! however how do I change the image to my image? Does it need to link to a web page image? I am wanting it to link to one of the images uploaded to the site and have it inside a circle with white background.

You can create a blank page > Add a Gallery Section > Upload all icons there > Save > Right click on Icon > Copy Image Address URL.