Customize social media icons

The "Social" content block in the message and template editor allows you to add a row of social media buttons to your message body.

Drag the block into the message area, and then you can customize the format as well as the icons and links shown. Click on the block to bring up the content properties.

First, choose your preferred icon collection from the dropdown list. The editor offers a variety of full-color and single-color options, as well as round or square backgrounds (or no background).

Icon collection dropdown menu

You can further customize the alignment and space between the buttons below the icon configuration section.

Next, configure the blocks for each icon you would like to appear in your social block. By default, Facebook, Twitter, Instagram, and LinkedIn are included. If you do not want any of these, select the red "Delete" link in the bottom-right corner of that block.

Click "Add new icon" below the existing blocks to open the icon panel. The panel has numerous built-in icons for popular social media services around the world, share icons for several platforms, other common icons, and the option to add a custom icon of your choosing. The built-in icons are:

  • Facebook
  • Twitter
  • Instagram
  • LinkedIn
  • YouTube
  • Pinterest
  • Vkontakte
  • Odnoklassniki
  • Blogger
  • Medium
  • Tumblr
  • Soundcloud
  • Spotify
  • Vimeo
  • Vine
  • SinaWeibo
  • Glassdoor
  • Snapchat
  • Telegram
  • WeChat

Select an icon from the panel or choose "Add a custom icon" to add a button to your message.

Add new icon panel

Once an icon is included in the block, you can configure where the button will point with the "Url" field in the icon's box. Toggle "More options" to change the name of the icon (which appears when you hover over it) or the alternate text. By default, the alt text is the same as the icon name.

Configuration options for a social icon

To change the image for a custom icon, click the "Change icon" button below the star icon that is inserted as a placeholder. Select an image from Resources. The image will automatically be resized proportionally to match the height of the other icons.

Best practice: For best results, choose an image that is square and has a transparent background.

Grab the handle icon at the top left of the box and drag and drop to change the order that the icons appear in.

Was this article helpful?
1 out of 4 found this helpful



Please Sign in to leave a comment if you don't see the comment box below.