有沒有辦法將一個圖標添加到 MailChimp 嵌入表單的“提交”按鈕？

Question

我正在使用 MailChimp 嵌入表單來收集時事通訊的電子郵件地址。

我的客戶的設計只使用了一個右箭頭而不是“訂閱”這個詞，但是，當我嘗試在“值”部分中放置除文本之外的任何其他值時，它會輸出原始數據與字體真棒。

有沒有辦法在嵌入的文本中操縱提交按鈕的“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>