ISTWCMS-3594: updating FF twig to handle icons and adding stylings for icons

source/_patterns/04-components/facts-and-figures/_facts-and-figures.scss

@@ -4,6 +4,10 @@ $global-rounded: 1000px;
 $highlighted-fact-radius: $global-radius;
 $highlighted-fact-round: $global-rounded;
 
+.uw-ff .owl-carousel .owl-item img {
+  width: auto;
+}
+
 .uw-ff--with-bubbles .owl-item {
   position: relative;
 
@@ -96,6 +100,13 @@ $highlighted-fact-round: $global-rounded;
     color: $uw-black;
     display: block;
 
+    &--icon {
+      img {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+
     &--big {
       font-family: BureauGrotCond,impact,"avenir next condensed heavy","Droid Sans",sans-serif;
       font-size: 3.24732rem;

source/_patterns/04-components/facts-and-figures/facts-and-figures.twig

@@ -5,7 +5,13 @@
         {% for details in ffs.details %}
           <div class="uw-ff__fact {{ icon != '' ? 'with-icon' : 'no-icon' }}">
             {% for detail in details %}
-              <span class="uw-ff__text uw-ff__text--{{ detail.type }}">{{ detail.text }}</span>
+              {% if detail.type == 'icon' %}
+                <div class="uw-ff__text uw-ff__text--{{ detail.type }}">
+                  <img src="{{ detail.icon }}" />
+                </div>
+              {% else %}
+                <span class="uw-ff__text uw-ff__text--{{ detail.type }}">{{ detail.text }}</span>
+              {% endif %}
             {% endfor %}
           </div>
         {% endfor %}