Font Awesomeの使い方_WordPressで使う方法
Font AwesomeはウェブサイトやブログでWebアイコンフォント（以下：アイコン）を表示できるようにしてくれる有名なサービスです。
Webアイコンフォントとは？
文字と同じ様に表示出来るアイコンです。文字と同じ扱いなので大きさ、色、（背景色、スペースなど）自由に変えられます。画像と違って拡大してもぼやけず綺麗です。
使用例
カメラ、くしゃみをしている人２種がFont Awesomeを使って表示した物です。
Font Awesomeよりも知名度は低いですがIcoMoonというサービスで作ったアイコン例。無料のアイコンも豊富ですがオリジナルが作れるのが特徴です→
目次
今回はWordPressで使うことを想定して解説します。まずはFont Awesomeを使う準備をします。（ここまではWordPress以外で使用するとしても同じです◎）
Font Awesomeのサイトでメールを登録し、アカウントを作成
アカウント作成なんていうと面倒臭そうですが一瞬です。
Font Awesomeの公式ページを開きます。有料プランもありますが無料プランで行くので「Start for Free」を選択します。
メールアドレスを記入します。
「Send Kit Code」を押します。
登録したメールアドレスにこんなメールが届くので「Click to〜」を押します。
任意のパスワード同じ物を上と下に入力して「Set Password〜」を押します。
アンケートが出ますがパスして下の小さな「No thanks〜」を押して次に行くので大丈夫です。
右上の小さな人マークを押します。
「Kits」を押します。
ちなみにここの人のイラストはアクセスするごとに変わったりします
個別のKitコードが割り振られているので数字の部分をクリックします
Font AwesomeのサイトでKitコードをコピー
このKitコードを一度決められた所に貼る事で、自分のサーバーにWEBフォントをアップロードしなくてもコード（例えばインスタのアイコンのコード、カレンダーのアイコンのコードなど）を貼るだけで表示出来る様になります。
右の青いボードマークを押すとこのコードがまるっとコピー出来ます。
ちなみにコードの下の説明はこんな風に書かれていました。
Font Awesomeは一旦ここまででWordPressへ行きます。
WordPressのheader.phpにKitコードをペースト
今Font Awesomeで取得（コピー）したKidコードをWordPressに貼ります。
管理画面の「外観」→「テーマエディター」を開きます。
右側のずらっと並んだテーマファイルの中の「テーマヘッダー」を押します。
これがオリジナルのテーマ（子テーマでないという意味）の場合は万が一間違えた時に復旧出来るように弄る前にファイルの中身をコピーしておく事をお勧めします。
上の方に<head>〜</head>というコードがあります。（お使いのテーマによってコードは多少違います）</head>の直前に先程コピーしたKitコードをペーストします。
こんな状態です。
「ファイルを更新」で保存、これで準備は完了です。
実際にアイコンを表示させてみましょう
投稿画面→新規で実際にやってみましょう。
もしかしたらいつもは「ビジュアル」でコード書く「テキスト」の方はあまり触った事のない方もいるかもしれませんが、今回は手順通りにコードを貼るだけなので安心してください。
Font Awesomeで好きなアイコンのコードをコピー
Font Awesomeに戻ります。
好みのアイコンを探すため「Icons」を押してアイコン一覧ページを開きます。
濃い色（黒）は無料プランでも使えるアイコンです。なのでグレーは使えません。左メニューのFreeを押すと使えるアイコン一覧になります。上の検索にtwitter、Instagramなど入力しても。
濃い表示の使えるアイコンだけになりました。
cameraと検索してみました。何種類かカメラのアイコンが出るので好きな物を押します。
上の<i class="fas fa-camera"></i>を押すとまるっとコピー出来ます。これがこのカメラのアイコンを表示させるためのコードです。
WordPressの投稿など好きな所にコードをペースト
「テキスト」になっている事を確認して先程のコードをペーストします。
続けて文字を入力する場合は「ビジュアル」タブに切り替えます。”カメラのアイコン”と入力しました。保存して投稿を表示してみると、、
（文字の大きさ24pxにしています）こんな感じで黒いカメラのアイコンが表示されました◎
管理画面に戻って編集モードで「テキスト」を見てみるとこんなコードになっています。
続けてもう１つやってみます。
Font Awesomeでお好きなアイコンを選んでコードをコピー、WordPressの投稿画面の「テキスト」の方にペースト、
こうです。どのアイコンもデフォルトだと黒でこの位の大きさです。
最初に言っていた様に色や大きさを変えてみたいなぁ
アイコンの色や大きさなどを変える
CSSコードでこのアイコンはこの色、この大きさ、などと書くと水色のくしゃみアイコンの様に変更できます。
「テキスト」を見ると下の水色のくしゃみアイコンも他と変わりません。ではどこにCSSを書いてこれだけ色や大きさを変更したのかというと色々な方法がありますがWprdPressのCSSを書けるプラグインを入れました。
プラグイン「WP Add Custom CSS」を入れて有効化し、投稿編集ページを更新すると下の方に「カスタムCSS」というスペースが出来ています。ここにCSSを書くのです。
水色のくしゃみアイコンはこんな風に書きました。FontAwesomeのコードの一部 fa-head-side-cough-slash の前に「.」が付きます。{ } で囲むのもCSSを書く時の決まりです。上から大きさ、色、スペースをこうして、と指示しています。（順番は違っても大丈夫です）
スペース（padding-right: 10px;）というのはアイコンの右側に10pxスペースを作ってという指示です。これを書いたので文字「コロナ〜」とアイコンの間に適度にスペースが出来て読みやすくデザインも綺麗になります。逆に何も指示していない上のカメラの場合は詰まった感じがしてしまいます。（好みですしアイコンによっては必要ないものも）
こんな感じで見た目、デザイン部分を担当するのがCSSです
もう少しCSSをやってみます。
先程まで黒くて小さかった上のクシャミアイコンをこんな感じで背景の色付き赤く表示するには
投稿の「ビジュアル」はこうです。
「テキスト」も上下で変更した所はありません（２段落目）
では何を変更したかと言うと先程と同じ様に「カスタムCSS」にCSSで指示を書きました
水色のくしゃみアイコンのCSSに続いて書いた.fa-head-side-cough{〜}です。背景に色を付ける事もできます。
CSSをもう少し詳しく知りたい方は「コピペで使えるCSSサンプル」へ
また、Font Awesomeもいいけど自分でオリジナルアイコンを作ってみたい方はこちら
その際、アイコンを描くときの注意点
オリジナルアイコンが欲しいけど、自分では描けそうもない方はお任せください
webアイコンフォント制作します
無料・有料のアイコンやWebフォントは便利で私も使っています。 でもデザインや見易さにこだわればこだわるほど会社やブランドを表現するオリジナルアイコン が欲しいと思った方。
スキルのオンラインマーケットcoconala（ココナラ）にて4つで17,000円で承っています。現在ご覧のサイトの「お問い合わせ」からもご相談ください◎
Font Awasome、CDNからKitコードへ変更
昔はCDNと言う皆で共通のコードを<head>〜</head>に貼っていました。（昔のCDNもそのまま使えるようです）それが現在は今回の解説のようにKitコードと言う個別に割り振られる（なのでメールを登録してアカウントを作る必要があるのでした）コードを貼る方法に変更されたようです。
Font AwasomeとIcoMoonはバッティングする？
IcoMoonが先に入っていたサイトにFont Awasomeを入れたらFont Awasomeが正しく表示されなくなってしまいました。（IcoMoonはちゃんと表示されます）IcoMoonを入れた時にコードを弄ったのでそれが影響している気もします。なので両方入れても大丈夫な場合も有るかもしれません。原因が解りましたら追記します。
う〜ん。。。
