ContactForm7のボタンにFontAwesomeアイコンを設置してみた【WordPress】

「ContactForm7」のボタンにFontAwesomeでアイコンを使う方法を紹介します。
すでに試したことがある方もいるかもしれませんが、普通に記述しても表示されません。

[submit "<i class="fa-solid fa-envelope"></i> 送信"]

送信　← 結果はこんな感じです

そこで、FontAwesomeの文字コードを使います。
FontAwesomeアイコンのUnicodeの先頭に「&#x」末尾に「;」を付けたものが文字コードになります。
今回使用しようとしている「fa-envelope」であれば、Unicode「f0e0」の先頭と末尾に追記した「」が文字コードになります。

[submit " 送信"]

 送信

このままではうまく表示されません。
CSSでフォントファミリーをFontAwesomeに指定しないといけないのです。

■CSS
.wpcf7-submit{
　　font-family: "Font Awesome 6 Free";
}

CSSがよくわからないという方は、classに該当するstyleを追記してあげるという方法もあります。

[submit class:fa-solid " 送信"]

送信

以上「ContactForm7のボタンにFontAwesomeアイコンを設置してみた」でした。