How to add social icon in my sent mail

To add social icons to your sent emails, you can use a combination of HTML and CSS. Here's a step-by-step guide:

Method 1: Using HTML and CSS

Create a new HTML file or add the following code to your existing HTML file:


<a href="https://www.facebook.com/yourfacebookpage" target="_blank">
<img src="https://cdn.jsdelivr.net/npm/[email protected]/icons/facebook.svg" alt="Facebook" width="20" height="20">
</a>

Replace the `yourfacebookpage`, `yourtwitterhandle`, and `yourlinkedinprofile` with your actual social media profiles.

2. Add the following CSS code to your HTML file or an external stylesheet:
```css
.social-icon {
  width: 20px;
  height: 20px;
  margin: 5px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.social-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

This CSS code styles the social icons with a circular shape, adds a box shadow, and sets the icon size.

Method 2: Using a plugin or template

If you're using a email template or a plugin like Mailchimp or ConvertKit, you can add social icons using their built-in features. For example:

In Mailchimp, you can add social icons to your email template by dragging and dropping the "Social Icons" block into your template.
In ConvertKit, you can add social icons to your email template by clicking on the "Add Block" button and selecting "Social Icons".

Tips and Variations

You can customize the social icon sizes, colors, and styles by modifying the CSS code.
You can add more social icons by duplicating the HTML code and modifying the href attribute and the icon URL.
You can also use other icon libraries like Font Awesome or Material Design Icons instead of Simple Icons.

By following these methods, you should be able to add social icons to your sent emails.

Mail Knowledge

How to add social icon in my sent mail