如何在 HTML 电子邮件中的锚标记旁边添加图标？

Question

如何在锚标记旁边设置图像（右侧的小箭头）<a> 并使它们垂直和水平对齐。我一直在以多种方式尝试这个，但我尝试过的每一种方法都遇到了错误。 <a> 标签在 html 电子邮件中不起作用（不可点击），或者箭头位于可点击区域之外。我只需要以下代码之一。这是我尝试过的一些代码：

第一个代码： 这里的问题是：如果用户单击箭头，它不会响应，因为它不在 <a> 标记内，但这是有效的

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
            <a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
          </td>
          <td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
          <td><img src="http://via.placeholder.com/5/007cb0" width="5" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

第二个代码： 我无法让文本在 <td>

中垂直对齐

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td height="50" align="left" style="text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: 100% !important;">
            <a style="height:100%;font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer; display: block">Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;"></a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

第三个代码 这里的问题是：它在任何电子邮件客户端中都不起作用，link 不可点击。

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;">
        <tr>
          <td>
            <a style="border: 1px solid red; padding: 20px;display: block; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
              <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
                <tr style="font-size: 16px; text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
                  <td align="left" style="text-decoration: none; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
                    GET VERSATILE
                  </td>
                  <td align="right" style="text-align: center; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15" /></td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

摘要：

我需要这个 <a> 标签旁边有一个箭头，并且蓝色区域周围都是可点击的。

感谢您的帮助。

Answer 1

OK 然后 add/adjust margin 和 padding 使可点击区域更大

a{
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 1em;
  margin: -1em;
}

td img{
  padding-bottom: 5px;
}

https://jsfiddle.net/33q09cy0/

并在 a 标签引用中添加图像。

<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
        <a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
        <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</td>

Answer 2

您能说说为什么要使用 table 格式来制作按钮样式的链接吗？ html-email 是特定的吗？这似乎更容易，经过一些定制后会给出相同的外观：

a {
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
}

<a href="">Link <span> &#x276F;</span></a>

Answer 3

已编辑

现在我知道您正在制作一个右对齐的按钮，我为您准备了一个更好的方法。

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
  <tr>
    <td><!-- The button code --> 
    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td style="background: #007cb0; text-align: center;">
              <a href="#" target="_blank" style="background: #007cb0; 
              border: 15px solid #007cb0; font-family: sans-serif; font-size: 16px; 
              line-height: 110%; text-align: center; text-decoration: none !important; 
              display: block; font-weight: 700;"><span style="color:#ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;Go to Link&nbsp;<img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
              &nbsp;&nbsp;&nbsp;</span></a>
            </td>
        </tr>
    </table>
    </td>
  </tr>
</table>

此代码将右对齐并在每个电子邮件客户端中显示 table。它在 Outlook 中看起来不太完美。为此，您需要添加一个专门用于 Outlook 的间隔符 table。

我正在删除旧的 post 和代码，但老实说，这与我昨天 post 添加的   相同，它为您提供了一种可靠的填充形式。

Answer 4

不确定您是否想到了这一点，但对于第一个问题，它应该就像在图像周围添加 a 标签一样简单。

试试下面这个，看看它是否适合你。我刚刚从兄弟 td 添加了你的标签，只是为了给你一个想法。

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
            <a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
          </td>
          <td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
          <td><a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;"><img src="http://via.placeholder.com/5/007cb0" width="5" /></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

希望这个答案对你有用。

Answer 5

这适用于大多数电子邮件客户端，即使我更改了锚标记内的文本也是如此。

希望对您有所帮助。

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0;font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
        <tr>
          <td class="links" style="padding: 10px; color: #ffffff; vertical-align: middle; text-align: center; font-family: Arial, Helvetica, sans-serif;font-weight: bold;"><a style="text-align: center; display: block;cursor: pointer;font-family: Arial, Helvetica, sans-serif; color: #ffffff !important; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: bold;" pm-link="landingpage1" pm-link-default-url="global_landingpage">GO TO LINK<img src="http://via.placeholder.com/15/007cb0" width="15" alt="" /><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;padding: 0 0 4px 0;max-width: 20px" /></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

如何在 HTML 电子邮件中的锚标记旁边添加图标？

How Can I add an icon next to anchor tag in HTML email?

html

css

anchor

html-email