有没有办法只向 MailChimp 嵌入表单 'submit' 按钮添加一个图标？

Question

我正在使用 MailChimp 嵌入表单来收集时事通讯的电子邮件地址。

我的客户的设计只使用右箭头而不是“订阅”一词，但是，当我尝试在“值”部分中放置除 text 之外的任何其他值时，它输出原始数据与字体真棒。

有没有办法在嵌入的文本中操纵提交按钮的 "value="Subscribe" 来使用箭头，如所附的屏幕截图（客户端设计）？

<!-- EMAIL INPUT -->
<div id="mc_embed_signup_scroll">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

客户设计：

如果我尝试使用 Font Awesome 作为值，结果：

我也尝试过使用 CSS 和 content"" 但没有任何效果。

.tertiary_btn.et_pb_button:after {
  font-family: "Font Awesome 5 Free"!important;
  font-weight: 900;
  content: "\f178";
  padding-bottom: 5px;
  display: block;
  font-size: 25px;
  opacity: 1!important;
  transition: none!important;
  margin-left: 8px;
  position: relative;
  margin-top: 4px;
  color: inherit;
}

我也查看了他们的“fredicons”，但我不确定这些是否与嵌入表单一起使用，因为它们也没有效果。

如果您过去不得不在 MailChimp 嵌入表单中使用箭头与文本，并且知道解决此问题的最佳方法，请告诉我。谢谢！

Answer 1

您可以使用 <button> 代替 <input type="submit">

button {
display: flex;
align-items: center;
justify-content: space-between;
width: 200px;
}

input[type="text"] {
width: 200px;
background-image: url("https://cdn-icons-png.flaticon.com/512/271/271228.png");
background-position: 98%;
background-repeat: no-repeat;
background-size: contain;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="text" placeholder="textfield">
<button>Subscribe <i class="fa fa-chevron-right" aria-hidden="true"></i></button>

有没有办法只向 MailChimp 嵌入表单 'submit' 按钮添加一个图标？

Is there any way to add just an icon to a MailChimp embed form 'submit' button?

html

css

mailchimp