web-dev-qa-db-ja.com

お問い合わせフォーム7を使用してWordpressの送信ボタンにFontAwesomeアイコンを追加するにはどうすればよいですか？

Wordpress ContactForm7を使用して、fontawesome矢印アイコンを送信ボタンに追加しようとしています。これがあります：[submit class：button "Sendamessage"] in css：

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

そして、それは機能しません、何かアイデアはありますか？

wordpresscontact-form-7
3
mat

パーティーに少し遅れていることは知っていますが、送信ボタンにアイコンを表示するのに役立つ、より簡単なオプションを見つけました（または少なくともそう思いました！）。

疑似要素は必要ありません。要素をお問い合わせフォームに直接挿入できます。

<!--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;">

更新：

CF7の代わりにFontAwesome AjaxLoaderを使用することもできます。

/*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>
9
coops

更新：

お問い合わせフォーム7は、デフォルトで送信ボタンに<input type="submit">要素を使用します。 input要素には子ノードがないため 。input要素は:: before/:: after疑似要素を使用できません。

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>
1
cabrerahector