Xmasギフトはこちらからどうぞ

【WordPress】で 「Font Awesome」を使う簡単な方法

Font Awesomeとは?

ウェブサイトやブログでWebアイコンフォントを表示出来るようにしてくれるサービスです。
最近このサービスにハマっています笑
ともすれば味気ないブログの記事に、一服の清涼感を与えてくれますね。
例えば
「矢印」とか、他にも

 ペン
メール
 病院

このようなアイコンを表示することが出来ます。

MEMO
使用方法は後述しますが、上の様にアイコンの幅を揃えたい場合は

i class="fas fa-pen-nib fa-fw 「fa-fw」という属性を半角一つ空けて付けてください

Font Awesomeを使うメリット

  • 拡大してもぼやけません
  • 色やサイズを変えたりすることが出来ます
  • テーマを変えても使えます
  • はてなブログや他のブログでも使えます
  • WordPressでの使用方法

    こちらのホームページにアクセス(PCの場合) 英語のホームページですが、やることはいたって簡単です笑
    参考 Icons. Easy. Done.Font Awesome

    「How to Use」をクリック

    「How to Use」をクリック
    注意
    これから使用される方は最新のバージョンなのか確認してください。
    2018年10月28日現在>Version5.4.2です

    クリップボードマークをクリック

    クリップボードマークをクリック

     

    こちらにもコードを用意しています。 コピーしてお使いください。

    Font Awesome
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" 
    integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    

    コードの貼り付け

    [外観] ⇒
    [テーマの編集] ⇒
    [小テーマ]を選択⇒
    [header.php]の</head>の前にコードを貼り付け

    header.php子テーマ

    これでフォントを使用する準備が出来ました。
    実際にホームページから好きなフォントを使ってみましょう。
    フリー版だと現在1,388個のフォントが使えます。

    注意
    検索する時は必ず英語でしてください。
    例:自動車✗ car ○

    例えば自動車の場合「car」と入力 自動車アイコンの選択 コードをコピーして完了です。
    コードのコピー

    自動車
    <i class="fas fa-car"></i>
    自動車
    フォントと字の間隔を開けたい場合はその間にスペースを入れてください
    自動車 となります。

    便利な使い方

    ほとんど決まったアイコンを使用するのにその度ホームページを開くより、便利な方法があります。

    単語登録して使う

    例えば自動車の場合、「じど」の2文字で単語登録をします。
    (2文字で登録した方が統一しやすく、早く打てるし連想しやすいからです) 単語登録

    クリップボード拡張ソフトを使う

    私は「Copied」と言うソフトを使ってFont Awesomeを管理していますが、一覧性があってとても便利です。
    copiedで登録
    iCloudで同期が出来るので、iPhone・iPad・Macで使用出来ます。
    「Copied」の紹介記事はこちらです。
    【copied】ブログ編集・加工に超絶便利なクリップボード拡張ソフト ダウンロードはこちらからどうぞ

    Copied

    無料
    (2018.10.28時点)
    posted with ポチレバ

    まとめ

    フリーでも充分なのですが、有料版を使いたいという方は$60支払えば、4,357個のフォントが使えます。
    よろしければ試してみて下さい。
    もっと詳しい使い方を知りたいという方はこちらのブログを参考にして下さい。
    参考 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おうサルワカ 以上、お読みいただきありがとうございました