Как добавить значок FontAwesome для отправки кнопки в Wordpress с помощью ContactForm7?

Question

Я пытаюсь добавить потрясающую иконку со стрелкой для отправки кнопки в Wordpress с помощью ContactForm7. У меня есть это: [отправить класс: кнопка "Отправить сообщение & # xf30b;"] в css:

.wpcf7-submit:before {
    content: '\f30b';
    font-family: 'Font Awesome 5 Free' !important;
}

А это не работает, есть идеи?

Answer 1

Я знаю, что немного опоздал на вечеринку, но я только что нашел более простой вариант (или, по крайней мере, я так думал!), Который помог мне получить значок на кнопке отправки.

Псевдоэлементы не нужны, вы можете просто вставить элемент прямо в контактную форму:

<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

Вы также можете добавить стили к кнопке следующим образом:

/*Then you can add whatever style you want to your button*/

button.wpcf7-submit {
  background: #31D1D3;
  padding: 10px 15px;
  border: 0;
}

button.wpcf7-submit i {
  margin-left: 5px
}

button.wpcf7-submit:hover {
  color: white;
}

button.wpcf7-submit:hover i {
  color: white;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->


<!--add the following instead of [submit] in Contact Form 7-->

<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

Обновление:

Вы можете даже использовать Font Awesome Ajax Loader вместо CF7!

/*Then you can add whatever style you want to your button*/

button.wpcf7-submit {
  background: #31D1D3;
  padding: 10px 15px;
  border: 0;
}

button.wpcf7-submit i {
  margin-left: 5px
}

button.wpcf7-submit:hover {
  color: white;
}

button.wpcf7-submit:hover i {
  color: white;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->


<!--add the following instead of [submit] in Contact Form 7-->

<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<i class="fab fa-github ajax-loader" style="visibility: hidden; opacity: 1;"></i>

Answer 2

Обновление:

Контактная форма 7 по умолчанию использует элемент <input type="submit"> для кнопки отправки. input элементы не могут использовать псевдоэлементы :: before / :: after, потому что input элементы не имеют дочерних узлов .

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

---

Вам также необходимо указать свойство font-weight, иначе шрифт не будет загружен браузером.

.wpcf7-submit::before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
 }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<form action="" method="post">
  <button type="submit" class="wpcf7-submit">
    Send
  </button>
</form>