Is it possible to replace the social media icons?

[lait]

Hello,

I am new to this platform and the syntax. We have custom social media icons in our theme. Example:

<a href="{{ module.link_sharetw }}" class="share-button twitter">
<img src="{{ get_asset_url('/greenpeace_p4_theme/assets/twitter.svg') }}" />
</a>

I would like to replace the default icons used in the social sharing module here. Is it possible?

{% 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;" %}

{% 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('share_twitter') }}
{{ render_social_icon('pinterest') }}
{{ render_social_icon('email') }}
{{ render_social_icon('whatsapp') }}
</div>

[webdew]

Hi @lait ,

For social sharing, you can use this module and change the icons.
https://knowledge.hubspot.com/design-manager/use-custom-social-icons-on-hubspot-pages-or-templates
Please refer https://knowledge.hubspot.com/design-manager/add-social-links-to-hubspot-templates

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[lait]

PS: I know there is a way to replace social media icons in the module inspector but it only takes pngs.

[miljkovicmisa · Accepted solution]

Hello @lait , you will need to duplicate the default module in order to achieve what you need, because the default module has a line where it defines the name of the file alongside it's extention and it is .png by default, below is the line in question:

{% set logo = networkName ~'-color.png' %}

You will probably need something like the line below:

{% set logo = networkName ~'.svg' %}​

So in order to modify that line you will have to duplicate the module because default modules are not editable.
If you need assistance on how to duplicate and customize your module you can refer to this documentation link.
Otherwise if you have further questions, don't hesitate to ask here.

If my answer was helpful please mark it as a solution.