The social media icon element

In this article:

Introduction

The Social Media Icon element is used to add individual social media channels (icon and associated link) to a signature. This option can be particularly useful if you need to add an icon in line with text - for example:

social_media_icon_example.png

Having dropped this element into your design, setup options are displayed so you can customize settings for the social media channel.

Note: If you are adding multiple social media channels, it may be quicker to use the Social Media Strip element - this lets you define a range of channels in one place.

Setting up a social media icon

Having dropped this element into your design, setup options are displayed, so you can add settings for the social media channel:

social_media_icon_setup.png

The social media channel is presented with three pieces of information:

Icon A range of professional icons are provided - just use the drop-down list to select one.
Link Enter the URL for the required social media page. If the required URL is the same for everyone in your organization, you can just add a static link (for example: https://www.facebook.com/exclaimer). However, if these accounts vary by user and account details are stored in a user details field in Office 365, you can add this field to the URL. To do this, position the cursor at the end of the URL (after the forward slash) and type an open curly bracket. For example: https://www.facebook.com/{. This displays a list of available attribute fields, from which you can make a selection:

social_media_icon_user_attributes.png

For further information about working with user attributes and social media icons, please see our Setting up social media icons with attributes article.

Alt Specify 'alternate' text to be shown if, for some reason, the icon cannot be displayed.

Having added details for the required social media channel, you can click OK to confirm, or you can:

Note: You define properties for social media icons once you've confirmed these settings and added the element to your design.

Adding another social media channel

To add another social media channel, click the Add {Field} button:

social_media_icon_add_1.png

This adds another row to the list, so you can choose an icon, add Link and Alt details (as before), then click OK to confirm.

Note: When you add more than one social media channel in this way, they are added as a group

Selecting a layout

If you add multiple icons, you can choose whether to display them horizontally:

social_media_icon_horizontal.png

...or vertically:

social_media_icon_vertical.png 

Removing a social media channel

If you have added more than one social media channel, you can remove an entry by clicking the cross icon associated with that item:

social_media_icon_remove.png

Note: It doesn't matter if you change your mind later about which channels to include. Once you've added an icon to a signature design, you can still remove individual fields at any time.

Social media icon properties

Once you've confirmed the setup of your social media icon and added this element to your design, properties for the icon are displayed, so you can determine how the field is displayed in the signature. These properties are summarized below:

Note: If you have added more than one social media icon, group properties will also apply. Common group properties are detailed in our Groups and group properties article.

Social media icon 

social_media_icon_properties.png

Social media icon properties determine the appearance of the icon: 

Background Use this option to change the background color of icons. For example:

Default:

icon_background_1.png

Background set to black:

icon_background_2.png

Foreground Use this option to change the foreground color of icons. For example:

Default:

icon_foreground_1.png

Foreground set to red:

icon_foreground_2.png
Width / Height Use this option to change the size of icons. For example:

Default:

icon_size_1.png

Width set to 50px:

icon_size_2.png

Corner radius Increase or decrease the curve on icon corners. If the slider is set to the minimum setting, the icon is square:

icon_curve_zero.png

If the slider is set to the maximum setting, the icon is round:

icon_curve_max.png

If the slider is somewhere in between (as per the default), the icon has rounded corners.

Show glass If this option is selected, the icon is displayed with a glassy finish; if it is switched off, the icon has a flat appearance. For example:

Show glass switched on:

icon_glassy_on.png

Show glass switched off:

icon_glassy_off.png

icon_hyperlink_properties.png

Hyperlink properties are used to add link information for the icon:

Destination URL Specify the required link for the social media channel - for example: https://www.facebook.com/exclaimer.

 

 

Alt text Specify 'alternate' text to be shown if, for some reason, the icon image cannot be displayed.

Visibility

icon_visibility_properties.png

Visibility properties are used to determine the circumstances under which the icon should/should not be displayed:

Always visible The default setting is to always to display the icon.
Hidden if this field is empty  You can choose to hide this group if a (selected) user attribute is empty.

Alignment

icon_alignment_properties.png

Alignment properties are used to determine horizontal and vertical alignment of the icon:

Horizontal Determines horizontal alignment of the icon within the signature  - choose LeftCenter or Right
Vertical Determines vertical alignment of the icon within the signature  - choose TopCenter or Bottom

Border

icon_border_properties.png

Border properties are used to define borders for the icon:

All  Select a border type, size and color and ensure that the All the same check box is ticked. These settings will be applied for all borders (left, right, top and bottom). This is the default setting (by default, no border is applied because the border size is set to 0).
Left / Right /
Top / Bottom
Ensure that the All the same check box is not ticked and define individual border properties as required.

Padding

icon_padding_properties.png

Padding properties are used to add spacing for the icon:

All The default setting is for this option to be switched off.
Left / Right /
Top / Bottom
Ensure that the All the same check box is not ticked and define individual padding properties as required. The default setting is for there to be 3px padding on the Right. For further information, see Adding spacing between elements in your signature.

Can I use my own social media icons?

A range of social media icons are available when you choose to set up a social media icon. If you wish to use your own icons, you can do so by adding an image - using this method, you can add or link to your own icons.

 

Haven't found a solution to your problem?

Please click the button below, login to the Exclaimer Cloud portal and raise a support ticket. A member of the Exclaimer Support team will then be in touch.

Raise a support ticket