ライフハック・ Apple・ 愛犬・ ランニング

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

読了時間: 約328

スポンサードサーチ

Font Awesomeとは?

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

 ペン
メール
 病院

このようなアイコンを表示することが出来ます。
上の様にアイコンの幅を揃えたい場合は
i class="fas fa-pen-nib fa-fwfa-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

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

まとめ

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