WordPressのフォームにアイコンを追加する方法

フォームにアイコンを追加したいですか?アイコンは、フィールドの目的を視覚的に補強し、フォームをよりカスタマイズしたように見せることができます。

このチュートリアルでは、Font Awesomeのアイコンをフォームに追加する方法について説明します。

この記事で

サイトにFont Awesomeを追加する
Font Awesomeからアイコンを選ぶ
フォームにアイコンを追加する
入力フィールドにアイコンを表示する
アイコンを右側に配置する

サイトにFont Awesomeを追加する

最初のステップは、Font Awesomeのアイコンライブラリをサイトに追加することです。Font Awesomeのアイコンはフォントとして機能し、サイトの他のフォントと同じ色とサイズになります。

Font Awesomeアイコンライブラリをサイトに追加するには、サイトのヘッダーにコードを追加する方法からプラグインをインストールする方法まで、さまざまな方法があります。各オプションの詳細については、WPBeginnerのWordPressにアイコンフォントを追加するガイドをご覧ください。

シンプルにするために、Better Font Awesomeというプラグインを使います。これは無料のWordPressプラグインで、あなたのサイトにFont Awesomeアイコンを使うために必要なリソースを追加してくれる。

準備ができたら、プラグインをインストールしてください。有効化されたらすぐにチュートリアルの次のステップに進むことができます。

Font Awesomeからアイコンを選ぶ

あなたのサイトでFont Awesomeを使えるようになったら、フォームで使いたいアイコンを探し始めましょう。

注：Font Awesomeは無料と有料のアイコンを提供しています。Font Awesomeサイトの左メニューから、無料のアイコンのみを簡単に見ることができます。

使用したいアイコンのページで、アイコン名のすぐ下に表示されているunicodeの値を探します。

Font Awesomeアイコンのunicodeを探す

上の画像では、ユニコードは f1d8.

このチュートリアルの後半でカスタムCSSスニペットに含める必要があるので、フォームで使用したい各アイコンのユニコードをメモしておいてください。

フォームにアイコンを追加する

フォームにアイコンを組み込む方法はいくつかあります。以下にいくつかの例を紹介しますが、その前にいくつか注意点があります。

まず、以下の例のほとんどすべてで、WordPressサイトにカスタムCSSを追加する必要があります。その方法の詳細については、WPBeginnerのサイトにカスタムCSSを追加するためのステップバイステップガイドをご覧ください。

注：特にこのチュートリアルのCSSをテーマのスタイルシートに追加する場合は、子テーマを使用することを強くお勧めします。子テーマの作成方法の詳細については、WPBeginner's guide tocreate a child themeを参照してください。

さらに、CSSスニペットで使用する必要があるフォントファミリーは、Font Awesomeの無料アイコンを使うか有料アイコンを使うかによって異なります。

注：このチュートリアルでは "Font Awesome 5 Free" フォントファミリーはフリーアイコン用です。Font AwesomeのProアイコンのライセンスをお持ちの場合は、正しいフォントファミリーを参照してください。Font Awesomeの CSS疑似要素に関する公式文書を参照してください。単純に "Font Awesome 5 Free" を、特定のフォント・ファミリーに付属のスニペットに追加してください。

フォームタイトルの前にアイコンを表示する

フォームのタイトルの前にアイコンを追加するには、アイコンを挿入するカスタム CSS を作成する必要があります。この CSS は、サイト上のすべての WPForm のタイトルの前にアイコンを表示したいのか、それとも特定のフォームの前に表示したいのかによって少し異なります。

すべてのフォームタイトルにアイコンを追加する

すべてのフォームタイトルの前にアイコンを表示するCSSは、より一般的なのでシンプルです。以下に必要なCSSスニペットを示します：

.wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and backslash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

注:あなたのサイトにCSSを追加するとき、次のようなものが必要になるかもしれません。 !important をセミコロンの前に置くと、カスタムスタイルが正しく適用されます。以下のガイドを参照してください。 CSSのトラブルシューティングをご覧ください。

このスニペットには、カスタマイズが必要な行がいくつかあります。まず、選択したアイコンのFont Awesomeユニコードが、次の行の後に含まれていることに注意してください。 content:.

この値は、Font Awesomeのライブラリにある他のアイコンのユニコードに置き換えることができます。

このCSSには10ピクセルの右マージンも含まれています。これがないと、アイコンとフォームのタイトルの間にスペースがなくなってしまいます。この数値はお好きなサイズにカスタマイズできます。

フロントエンドでは、この例は次のようになる：

特定のフォームのタイトルにアイコンを追加する

サイト上のすべてのフォームのタイトルに同じアイコンを追加する代わりに、より特定のCSSを使用して単一のフォームをターゲットにすることができます。

そのためには、アイコンを追加したいタイトルのフォームに固有のID番号を見つける必要があります。

WPForms " All Forms の ショートコード欄でフォーム ID を見ることができます。

ID番号30を使用して、CSSをより具体的にします。以下は、特定されたフォームのタイトルの前にのみアイコンを追加するCSSです：

#wpforms-30 .wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

このCSSは、あなたのサイトのすべてのフォームタイトルにアイコンを追加するスニペットとほとんど同じです。唯一の違いは #wpforms-form-30これにより、このスタイルはこの1つのフォームにのみ適用される。

独自のフォームの場合は、上のセクションで説明したように、フォームID番号を変更し、アイコンのユニコードを置き換えるだけです。

フィールド・ラベルの前にアイコンを表示する

カスタマイズ可能なCSSスニペットを使用して、フォームの各フィールドラベルの前にアイコンを追加できます。追加するコードは、サイトのすべてのフィールドラベルに1つのアイコンを使用するか、特定のフィールドラベルの前にアイコンを表示するかによって若干変わります。

すべてのフィールドラベルにアイコンを追加する

サイト上のすべてのフィールドラベルの前にアイコンを表示するには、フォームタイトルのために上で説明したものと非常によく似たCSSスニペットが必要です：

.wpforms-form .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

上記のスニペットのunicodeを、使用したいアイコンのunicodeに置き換えてください。また、お好みに合わせてマージンサイズを調整することもできます。

フロントエンドでは、フィールドラベルアイコンは次のようになるはずです：

特定のフィールドのラベルにアイコンを追加する

すべてのフィールドの横に同じアイコンを表示させたくない場合もあるでしょう。一つのフィールドだけをターゲットにするには、CSSスニペットにアイコンを追加したいラベルのフィールドのユニークIDを含めて、より具体的にする必要があります。

このやり方は、上で説明したように一つのフォームのタイトルをターゲットにするのとよく似ています。

スニペットで使用するフィールドIDを見つけるには、公開ページかフォームプレビューを使ってフロントエンドでフォームを開きます。そして、対象としたいフィールドを右クリックし、Inspectを選択します。

画面が分割され、ページのソースコードが表示されるはずです。ターゲットにしたいフィールド全体がハイライトされていることを確認し（ラベルと入力ボックスを含む）、それからIDを探します。

注：ブラウザのインスペクタで確認できるフィールドIDは、フォームビルダーで確認できるフィールドIDとは異なります。

特定のフィールドラベルにアイコンを追加するためにCSSスニペットをカスタマイズする場合、フォームビルダーのフィールドIDではなく、インスペクタの完全なフィールドIDを使用するようにしてください。

上の画像のフィールドの場合、IDは次のようになる。 wpforms-9-field_0-container.

以下は、特定のフィールドのラベルにアイコンを追加するためのCSSスニペットです：

.wpforms-form #wpforms-9-field_0-container .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

このCSSスニペットの1行目を見ていただければ、このスニペットに #の後に、先ほど見つけたIDを続けます。これで、（このフォームでも他のフォームでも）他のフィールドのラベルを変更することなく、アイコンはこの単一のフィールドにのみ追加されます。

入力フィールドにアイコンを表示する

フィールドのラベルにアイコンを追加するのではなく、フィールド自体にアイコンを表示することができます。そのために必要なコードスニペットは、このチュートリアルの他のものとはかなり異なりますが、同じ要素の多くを使用します：

#wpforms-form-9 .wpforms-field,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block {
	position: relative;
}

#wpforms-form-9 input[type="text"],
#wpforms-form-9 input[type="email"],
#wpforms-form-9 textarea {
	padding-left: 35px !important;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label {
	position: relative;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label:before,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block:before {
	position: absolute;
	left: 10px;
	top: 32px;
	z-index: 99999;
	color: #757575;
	font-size: 17px;
	opacity: 0.3;
}

#wpforms-9-field_0-container .wpforms-field-label:before,
#wpforms-9-field_1-container .wpforms-field-label:before,
#wpforms-9-field_2-container .wpforms-field-label:before {
	font-family: "Font Awesome 5 Free";
}

#wpforms-9-field_0-container .wpforms-field-label:before {
	content: '\f007';
}

#wpforms-9-field_1-container .wpforms-field-label:before {
	content: '\f0e0';
}

#wpforms-9-field_2-container .wpforms-field-label:before {
	content: '\f086';
}

このスニペットでカスタマイズが必要な部分は以下の通り：

の数字を変更する。 #wpforms-form-9 に、アイコンを追加したいフォームの ID を入力してください。このIDはフォームのショートコードにあります。このチュートリアルの前半で.
交換 wpforms-9-field_0-container と、上のスニペットにある他のフィールドIDを、あなた自身のフォームのフィールドIDに置き換えてください。で説明されているように、完全なフィールドIDを使用しなければなりません。この記事の前のセクション.
上のスニペットのユニコードを代入する (f007, f0e0そして f086) に、使用したい Font Awesome アイコンのユニコードを入力してください。

この例のスニペットでは、フォームの3つのフィールドにアイコンを追加しています。以下の行を繰り返すことで、より多くのフィールドにアイコンを追加することができます。 #wpforms-9-field_0-container .wpforms-field-label:before, を作成し、独自のフォームとフィールドIDを追加する。

次に、スニペットの最後の行を繰り返し、例のフィールドIDに自分のフィールドIDを代入する。

注：このスニペットは以下のフィールド・タイプにのみ対応しています：

単一行テキスト
段落テキスト
名称
電子メール
ウェブサイト / URL

これらの行を削除して、フォームの少ないフィールドにアイコンを追加することもできます。

最後に、アイコンの外観を変更したい場合は、次の行の値を変更することで、アイコンの位置、色、サイズ、不透明度を調整できます：

position: absolute； 
left: 10px； 
top：32px； 
z-index：99999; 
color：#757575; 
font-size: 17px； 
opacity: 0.3；

フロントエンドでは次のようになる：

HTMLフィールドにアイコンを表示する

HTMLフィールドにアイコンを追加するのは最もシンプルなオプションで、カスタムCSSを必要としません。

必要なのは、HTMLフィールド内に簡単なショートコードを追加するだけです。例として、上記のいくつかの例で使用した紙飛行機のアイコンに必要なショートコードを以下に示します：

[icon name="紙飛行機"]]。

別のアイコンのためにこれを調整するには、Font Awesomeの特定のアイコンのページから名前をコピーする必要があります。アイコンの名前は、ページの上部付近に大きなテキストで表示されます。

そして、次のように置き換える。 paper-plane のショートコードに、使用したいアイコンの名前を入力してください。

フロントエンドでは、HTMLフィールドのアイコンは次のようになる：

HTMLフィールドでは、アイコンのショートコードの周りにテキストやHTMLを追加することもできます。詳しくはHTMLフィールドのチュートリアルをご覧ください。

送信ボタンにアイコンを追加する

このチュートリアルで紹介する最後の例は、フォームの送信ボタンにアイコンを追加する方法です。

これが必要なスニペットだ：

.wpforms-form button[type=submit]:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and button text */
}

この記事の他の例と同様に、ユニコードを希望のアイコンに置き換え、必要であればマージンを変更してください。

フロントエンドでは、送信ボタンのアイコンはこのようになります：

アイコンを右側に配置する

アイコンをアイテムの左側ではなく、右側に配置したい場合は :after の代わりに :before.例えば、紙飛行機のアイコンを送信ボタンの右側に配置するには、次のコード・スニペットを使用します：

.wpforms-form button[type=submit]:after {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}

上記のスニペットは、送信ボタンの右側にアイコンを配置します：

以上です！フォームのさまざまな要素にアイコンを追加できるようになりました。

背景画像を使ってフォームの見た目をカスタマイズしたいですか?CSS を使ってフォームに背景画像を追加する方法についてのチュートリアルをご覧ください。

WordPressのフォームにアイコンを追加する