[FIX] mass_mailing: issue with social media icons

Before this commit:

When we load some themes without installing website the social media icons look
weired and margin between those icons is also weired.

After this commit:

Now when we load mass_mailing themes without installing website the social media
icons same as before and margin between those icon is also same.

Task-3347902

closes odoo/odoo#125527

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/mass_mailing/static/src/scss/themes/theme_default.scss

@@ -103,6 +103,30 @@ div.col:not([align]) {
           width: $width;
           height: $height;
         }
+
+        $size: 3rem;
+
+        &.rounded-circle,
+        &.rounded,
+        &.rounded-0,
+        &.rounded-leaf,
+        &.img-thumbnail,
+        &.shadow {
+            display: inline-block;
+            vertical-align: middle;
+            text-align: center;
+            // fa-1x is not ouput
+            width: $size;
+            height: $size;
+            line-height: $size;
+            @for $i from 2 through 5 {
+                &.fa-#{$i}x {
+                    width: $size + $i;
+                    height: $size + $i;
+                    line-height: $size + $i;
+                }
+            }
+        }
     }
     // Background Images
     .oe_img_bg {

addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml

@@ -854,7 +854,7 @@
                             <a style="margin-left:10px" aria-label="Twitter" title="Twitter" href="https://twitter.com/Odoo">
                                 <span class="fa fa-twitter rounded bg-black" style="color: rgb(255, 187, 0) !important;"/>​
                             </a>&amp;nbsp;&amp;nbsp;
-                            <a aria-label="Instagram" title="Instagram" href="https://www.instagram.com/explore/tags/odoo/">
+                            <a style="margin-left:10px" aria-label="Instagram" title="Instagram" href="https://www.instagram.com/explore/tags/odoo/">
                                 <span class="fa fa-instagram rounded bg-black" style="color: rgb(255, 187, 0) !important;"/>
                             </a>
                         </div>