Красивая подпись с иконками в Яндекс Почте

3 мар. 2023 г.

3 минуты474 слова

Задача: Красиво оформить подпись Яндекс Почты и добавить иконки социальных сетей, при клике на иконку должен происходить переход в соцсеть.

К сожалению, в редакторе подписи нет встроенного конструктора для html верстки, поэтому расположить иконки в одну строку у нас не получится. Но мы можем сделать это с помощью любого редактора html кода.

Порядок действий

Находим нужные иконки и скачиваем. Рекомендую сайт icons8.ru, там большая бесплатная коллекция иконок.
Загружаем иконки в свое облачное хранилище или на хостинг и получаем прямую ссылку на изображения.
В редакторе кода готовим html код для иконок с ссылками. Используйте табличную верстку для корректного отображения во всех почтовых программах.

Пример кода с готовыми иконками для копирования в письмо

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;">
  <tr>
    <td class="social__icon" style="border-collapse: collapse; display: inline-block; padding-left: 0px; padding-right: 6px;">
      <a
        target="_blank"
        href="https://www.instagram.com/tweld.ru/"
        class="social__link"
        style="padding-left: 0px; font-size: 14px; line-height: 1.5; text-decoration: underline; color: #222222; font-family: 'Open Sans', arial, sans-serif !important;"
      >
        <img
          width="15"
          height="15"
          border="0"
          src="https://tweld.ru/upload/medialibrary/fa4/mf3a85cbzsnovn2j3med1b58xr2soa4f.png"
          alt=""
          class="social__img"
          style="outline: none; text-decoration: none; border: 0 none; -ms-interpolation-mode: bicubic; margin: 0; padding: 0; display: block; height: auto; line-height: 100%; max-width: 100% !important; width: 15px;"
        />
      </a>
    </td>
    <td class="social__icon" style="border-collapse: collapse; display: inline-block; padding-left: 10px; padding-right: 6px;">
      <a target="_blank" href="https://vk.com/technoweld" class="social__link" style="font-size: 14px; line-height: 1.5; text-decoration: underline; color: #222222; font-family: 'Open Sans', arial, sans-serif !important;">
        <img
          width="15"
          height="15"
          border="0"
          src="https://tweld.ru/upload/medialibrary/d62/tsd3mifx3g6j6o25qw32bga16nax71f2.png"
          alt=""
          class="social__img"
          style="outline: none; text-decoration: none; border: 0 none; -ms-interpolation-mode: bicubic; margin: 0; padding: 0; display: block; height: auto; line-height: 100%; max-width: 100% !important; width: 15px;"
        />
      </a>
    </td>
    <td class="social__icon" style="border-collapse: collapse; display: inline-block; padding-left: 10px; padding-right: 6px;">
      <a
        target="_blank"
        href="https://www.youtube.com/channel/UCq9OrZA5tGqI6aoOG_63wEQ"
        class="social__link"
        style="font-size: 14px; line-height: 1.5; text-decoration: underline; color: #222222; font-family: 'Open Sans', arial, sans-serif !important;"
      >
        <img
          width="15"
          height="15"
          border="0"
          src="https://tweld.ru/upload/medialibrary/c04/viyjd8m0qa50bmare2oxy1j205pectpe.png"
          alt=""
          class="social__img"
          style="outline: none; text-decoration: none; border: 0 none; -ms-interpolation-mode: bicubic; margin: 0; padding: 0; display: block; height: auto; line-height: 100%; max-width: 100% !important; width: 15px;"
        />
      </a>
    </td>
    <td class="social__icon" style="border-collapse: collapse; display: inline-block; padding-left: 10px; padding-right: 6px;">
      <a target="_blank" href="https://www.facebook.com/tweld.ru/" class="social__link" style="font-size: 14px; line-height: 1.5; text-decoration: underline; color: #222222; font-family: 'Open Sans', arial, sans-serif !important;">
        <img
          width="15"
          height="15"
          border="0"
          src="https://tweld.ru/upload/medialibrary/104/k4bo9odt6gnrmz85sshnpt1cwzzb6lbp.png"
          alt=""
          class="social__img"
          style="outline: none; text-decoration: none; border: 0 none; -ms-interpolation-mode: bicubic; margin: 0; padding: 0; display: block; height: auto; line-height: 100%; max-width: 100% !important; width: 15px;"
        />
      </a>
    </td>
  </tr>
</table>

Открываем код в браузере.

открыли код в браузере — Открыли код в браузере

Выделяем мышью иконки, копируем и вставляем в подпись письма.

Иконки могут сразу не отображаться, на их месте будет пустая белая область, все нормально, после сохранения они появятся и будут видны.

Добавляем в подпись остальную информацию.

Итоговый результат подписи с иконками в яндекс почте — Итоговый результат

Вот так легко и просто вы можете сделать красивую подпись в почте и добавить оформление на свой вкус.