Mjml: MJ-Social custom Icon not working

Created on 31 Oct 2016 · 11Comments · Source: mjmlio/mjml

For some reason I can't get the custom social networks working at all.

<mj-social 
            display="custom-network" 
            custom-network-icon="https://vodacom-now-blog.s3.amazonaws.com/uploads/image/image/277/facebook.png"
            custom-network-href="http://www.google.com/"
          />

any help would be greatly appreciated.

Question

Source

dawidvdh

Most helpful comment

Hey @dawidvdh,

By default, text-mode is set to true, which means you need to define a content for your social icon.

Note that content is mandatory if text-mode is set to true

You can omit a content by setting text-mode to false.

Please also add an icon-color (you can set it to none if you don't want any.

This MJML code should work:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-social 
          display="custom-network" 
          text-mode="false"
          custom-network-icon-color="none"
          custom-network-icon="https://vodacom-now-blog.s3.amazonaws.com/uploads/image/image/277/facebook.png" 
          custom-network-href="http://www.google.com/" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Let me know if it helps!

ngarnier on 31 Oct 2016

👍2

All 11 comments

Hey @dawidvdh,

By default, text-mode is set to true, which means you need to define a content for your social icon.

Note that content is mandatory if text-mode is set to true

You can omit a content by setting text-mode to false.

Please also add an icon-color (you can set it to none if you don't want any.

This MJML code should work:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-social 
          display="custom-network" 
          text-mode="false"
          custom-network-icon-color="none"
          custom-network-icon="https://vodacom-now-blog.s3.amazonaws.com/uploads/image/image/277/facebook.png" 
          custom-network-href="http://www.google.com/" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Let me know if it helps!

ngarnier on 31 Oct 2016

👍2

Awesome that works thanks!

dawidvdh on 31 Oct 2016

It works with one icon (one social). How can be work with 4 socials? (for example: facebook, youtube, vimeo and linkedin?

If I paste the code twice the icones align vertically and not horizontally

kaiusvreo on 2 Mar 2017

👍1

hey @kaiusvreo, put the different social networks in the same mj-social tag and use mode="horizontal" to display the icons side by side: https://mjml.io/documentation/#mjml-social

ngarnier on 2 Mar 2017

ngarnier, thanks so much for your reply,
I understand how it works, and it works.
I have only one thing to fix, how is possible to change the size of the icon?
My icon is 30x30px but it has the same size of the original icon

https://mjml.io/try-it-live/HkmM46r5x

kaiusvreo on 2 Mar 2017

You can use icon-size: https://mjml.io/try-it-live/SyjNBaH5l (I cleaned a bit your code as you were using invalid attributes such as margin, height and width.

ngarnier on 2 Mar 2017

ngarnier you rock!
thanks so so so so so much!
it's perfect!

kaiusvreo on 2 Mar 2017

These examples do not work anymore. What's changed?