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

我正在使用 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>

客戶設計：

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

如果我嘗試使用 Font Awesome 作為值，結果： 有沒有辦法將一個圖示添加到 MailChimp 嵌入表單的“提交”按鈕？

我也嘗試過使用 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 嵌入表單中使用箭頭與文本，并且知道解決此問題的最佳方法，請告訴我。謝謝！

uj5u.com熱心網友回復：

您可以<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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480320.html

標籤：html css 邮筒

上一篇：Javascript-classList.toggle("my-class")不起作用，因為主類正在獲取多個

下一篇：標題選單阻止網站上的主要部分