Looking for Help With Design Manager Social Sharing Module

[KLack]

I am having issues incorporating a custom Social Sharing Module into my drag-and-drop email. I have the module roughly built and can drag it into my email template, but the icons are all left aligned, and I am having an impossible time getting them to be centered instead. Coding is not my forte, and I don't see anywhere in the code that I could add the center align language. And the Style Fields - alignment option in the right-hand menu seems to do nothing.

The end goal is that we want our readers to be able to share the email content on social media.

Here's the code that I have:

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~";width:"~size~";border-radius:"~borderRadius~";border-width:0px;border:0px" %}
<center></center>

{% macro render_social_icon(networkName) %}
{% set network = module[networkName] %}
{% if (networkName == "pinterest" and network.pinterest_media and network.enabled) or (networkName != "pinterest" and network.enabled) %}
{% if networkName == "pinterest" %}
{% set pinterest_media = module.pinterest.pinterest_media.src %}
{% endif %}
{% set logo = networkName ~'-color.png' %}
{% set urlOperator = "&" if "?" in page_meta.canonical_url else "?" %}
{% if module.link %}
{% set social_link_url = module.link ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% elif content.email_type.blogRssChild %}
{% set social_link_url = content.rss_email_url %}
{% else %}
{% set social_link_url = page_meta.canonical_url ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% endif %}

<a href="{{ network.custom_link_format }}" target="_blank" rel="noopener" style="{{ linkStyle }}" >
<img src="{{ module_asset_url(logo) }}" class="hs-image-widget hs-image-social-sharing-24" style="{{ imgStyle }}" width="{{ size }}" hspace="0" alt='{{ "Share on " ~ networkName }}' />
</a>
{% endif %}
{% endmacro %}

<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing">
{{ render_social_icon('facebook') }}
{{ render_social_icon('linkedin') }}
{{ render_social_icon('twitter') }}
{{ render_social_icon('email') }}

</div>

[Mike_Eastwood · Accepted solution]

Hi @KLack 

Styling emails is challenging – lots of normal CSS works on some email clients some of the time.

I recommend creating an HTML Table, with an icon in each cell, then use inline CSS to center the icon.

Have fun

Mike

[PamCotton]

Hello @KLack, thank you for posting here!

I would like to add some of our top experts to this conversation @Anonymous @Mike_Eastwood any recommendations for @KLack matter?

Thank you,

Pam