年に何度か忘れるのでメモ。
サイト内でFont Awesomeを利用していることが前提です。

Webアイコンフォント『Font Awesome』普通の使い方

サイト内でFont Awesomeを利用する場合、まず公式サイトで名前（クラス）を確認して

使いたい場所で[html]<i class="fa fa-○○"></i>[/html]のような感じで使います。
例えば「send」なら

[html]<i class="fa fa-send"></i>[/html]で表示されます。

※上記例はFont Awesome4.7で、現行バージョン5の場合はclass=”faの「fa」の部分がスタイルにより「fas」（Solid）、「far」（Regular）のように若干異なります。

Contact Form 7の送信ボタンで『Font Awesome』を使う

通常の方法でContact Form 7の送信ボタンにFont Awesomeを設定してみます。

確認すると、フォントアイコンは反映されず、テキストもデフォルトの「送信」になっています。

Chromeの「検証」で確認しても、入力したタグはきれいさっぱり消えています。

多分ContactForm7のsubmitフォームタグ内部ではタグの利用は排除されているのでしょう。

Font Awesomeの文字コードを使う

そこで、クラスでは無く通常のテキストと同じようにFont Awesomeを扱ってみます。
これは、IllustratorやパワポなどでFont Awesomeを使う場合と同じ方法です。
公式チートシートで文字コードを確認します。

該当のアイコンを見つけ、文字コードをコピーします。

submitフォームにペーストします。

次にCSSでフォントファミリーを指定します。

Font Awesomeのフォントファミリーを指定

[css].wpcf7-submit {
font-family: FontAwesome;
}[/css]
のような感じで該当箇所にフォントファミリーを指定します。

送信ボタンにFont Awesomeアイコンが表示されました！

投稿 Contact Form 7の送信ボタンにFont Awesomeアイコンを追加する は studioDoghands に最初に表示されました。

サイトの多言語化プラグインの定番「WPML」で、お問合せフォームプラグインの定番「コンタクトフォーム7」の各項目の翻訳をしてみましょう。

考えられる翻訳方法

コンタクトフォームの翻訳は次の方法が考えられます。
A:言語ごとにコンタクトフォームを作成し、各言語の固定ページにそれぞれのショートコードを反映。
B:専用のプラグイン、「Contact Form 7 Multilingual add-on」を利用して、ひとつのショートコードから生成されるフォームを言語で分岐。
今回はBの方法を試してみます。

必要な環境、プラグインなど

WPMLの初期設定は終了している前提です。
また、日本語でのコンタクトフォーム7の作成も完了しておきます。
その他必要なプラグインは下記の通りです。WPMLにログイン後、ダウンロードページからダウンロード、アップロード後有効化しておきましょう。
「String Translation」
「Translation Management add-on」
「Contact Form 7 Multilingual add-on」

コンタクトフォーム7の翻訳

それではフォームを翻訳していきましょう。

WPML→翻訳管理から、コンタクトフォームを絞り込み検索します。

今回は「base」と名前を付けたコンタクトフォームを多言語化してみます。
該当のフォームを選択して言語を選び、「翻訳バスケットに選択したコンテンツを追加」をクリックします。

翻訳バスケットに移動し、トランスレーターを選び（もちろん自分で構いません）、「全てのアイテムを翻訳に送信する」をクリックします。

WPML→翻訳をクリックします。

「翻訳する」をクリックします。

とりあえず今回は青の「自分で翻訳する」を選択してみます。

各項目を選択し、翻訳していきます。

雷マークは自動翻訳なので、使ってみましょう。

返信メールも同様に修正します。

編集が完了したら、「Finish」を押して完了します。

これで、ひとつのお問合せフォームショートコードで複数の言語への対応が可能になりました。

フォームは、「お問合せ」からも多言語編集することができます。
項目をがっちりと変更（フリガナを削除したり、郵便番号からの自動住所反映コードを変更したり、等）する場合はここから修正した方が早いかもしれません。

後は微調整

後は設計による誤差の微調整を行います。このフォームの場合、「必須」テキストがCSS（SCSS）の疑似要素で設定されている様子で、英語版でも「必須」のままです。

修正にはいろいろな方法（英語フォームでは読み込むCSSを変更したり、英語フォームにIDを付けてCSSを分岐等）がありそうですが、今回は「:lang擬似クラス」を使ってみます。
使い方は「要素名:lang(言語コード) {プロパティ名:値;}」で、言語コードはこちらを参照してください。ja（日本語）、en（英語）、es（スペイン語）、fr（フランス語）、zh（中国語）のような感じです。

CSS(SCSS)に追加してみます。

修正されました！

投稿 WPMLでコンタクトフォーム7の翻訳をしてみよう は studioDoghands に最初に表示されました。