Custom Counter not showing images

Hi All,

Using the code found on https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace. It's edited to the below, but neither the icons nor the images are showing up. I'd prefer icons, but happy to settle with images (The second one has the image src tag within it)

The preview doesn't help, When published it shows the counter working flawlessly, but the icons and images simply don't show up. What am I missing to have them appear?

Code below (I don't know why it was removed without a reason before)

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

 var oTop = $('#counter').offset().top - window.innerHeight;
 if (a == 0 && $(window).scrollTop() > oTop) {
   $('.counter-value').each(function() {
     var $this = $(this),
       countTo = $this.attr('data-count');
     $({
       countNum: $this.text()
     }).animate({
         countNum: countTo
       },
       {
         duration: 2000,
         easing: 'swing',
         step: function() {
           $this.text(Math.floor(this.countNum));
         },
         complete: function() {
           $this.text(this.countNum);
         }
       });
   });
   a = 1;
 }
});
</script>
<div id="counter">
   <div class="sqs-col sqs-col-2 counter-value" data-count="18" data-desc="Countries"><i style="opacity: 1;color:#3996cc" class="fa fa-globe-americas fa-1x"></i><br>0</div>
 <div class="sqs-col sqs-col-2 counter-value" data-count="41" data-desc="Cities"><img src="https://images.squarespace-cdn.com/content/5cd5a139a56827a74ecd921e/1563403026857-BN8OZY9NU2JJILQSIBS3/cities.png?content-type=image%2Fpng"><br>0</div>
 <div class="sqs-col sqs-col-2 counter-value" data-count="33" data-desc="Airports"><i style="opacity: 1;color:#3996cc" class="fa fa-plane-departure fa-1x"></i><br>0</div>
   <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Brands"><i style="opacity: 1;color:#3996cc" class="fa fa-briefcase fa-1x"></i><br>0</div>
     <div class="sqs-col sqs-col-2 counter-value" data-count="1" data-desc="Billion in Construction"><i style="opacity: 1;color:#3996cc" class="fa fa-hard-hat fa-1x"></i><br>0</div>
       <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Clients"><i style="opacity: 1;color:#3996cc" class="fa fa-handshake fa-1x"></i><br>0</div>
</div>


<style>
.counter-value { 
   font-size: 60px;
  line-height:2em;
  text-align:center;
  padding:17px 0;
  height: 150px;
}
 .counter-value:after {
  content: attr(data-desc);
   display:block;
   text-transform:uppercase;
   font-size: 14px;
   line-height:1.2em;
   height: 150px;  
 }
</style>

How? There's no solution...