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

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

[submit "<i class="fa-solid fa-envelope"></i> 送信"]
 ← 結果はこんな感じです

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

[submit "&#xf0e0; 送信"]

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

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

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

[submit class:fa-solid "&#xf0e0; 送信"]

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です