カラーユニバーサルデザインに配慮しています

【Font Awesome 5】をWordPressで使う簡単な設定方法

読了時間: 約3

Font Awesomeとは?

ウェブサイトやブログでWebアイコンフォントを表示出来るようにしてくれるサービスです。このブログにも多用しています。ともすれば味気ないブログの記事に、一服の清涼感を与えてくれますね。

例えば 「矢印」とか、他にも

 ペン
メール
 病院

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

MEMO
使用方法は後述しますが、上の様にアイコンの幅を揃えたい場合は
i class="fas fa-pen-nib fa-fw 「fa-fw」という属性を半角一つ空けて記述します

コード
<i class="fas fa-pen-nib fa-fw"></i> ペン
<i class="fas fa-envelope fa-fw"></i> メール
<i class="fas fa-hospital fa-fw"></i> 病院

Font Awesomeを使うメリット

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

WordPressでの使用方法

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

参考サイト
12436288584_94d6bc46d2_b.jpg
Get vector icons and social logos on your website with 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」に貼り付け

次の手順で
  • 外観
  • テーマエディター
  • テーマヘッダーを選択
header.php子テーマ
  1. header.phpをクリック
  2. </head>の前にペースト
  3. ファイルを更新をクリックして完了

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

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

例えば自動車の場合「car」と入力

コードのコピー

コードをコピーして完了です。

自動車
<i class="fas fa-car"></i>

自動車
フォントと字の間隔を開けたい場合はその間に半角スペースを入れてください。 自動車 となります。

もし半角スペースを入れても間隔が開かない場合は、『テキストモード』で次のように入力してください。

コード
&nbsp;

見出しの前にFont Awesomeを表示する方法

例えば見出し2の前に(シェブロンマーク)をつけたいという場合は次のように指定します。

HTML
<h2> 見出し2</h2>
chevronマーク
「chevron」で検索して、f138をコピーします。
結果

見出し2

CSS
h2:before
{
  font-family: "Font Awesome 5 Free";
  content: "\f138";
 font-weight: 900;
  padding-right : 5px;/*文字との隙間*/
  color: #○○○○○○;/*アイコンの色はお好みで*/
}
注意
font-weight: 900;の指定を忘れないようにしてください。
FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。Solidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて書きましょう。
引用:【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

便利な使い方

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

『日本語入力』で単語登録

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

単語登録

『スニペット』アプリで単語登録

私は「Copied」と言うクリップボード拡張アプリを使ってFont Awesomeを管理していますが、一覧性があってとても便利です。

iPadでの登録画面
iPadでのFont Awesome登録画面

iCloudで同期が出来るので、iPhone・iPad・Macで使用出来ます。
「Copied」の紹介記事はこちらです。
【copied】コピペを楽にしてくれる便利なクリップボード拡張ソフト
ダウンロードはこちらからどうぞ

Copied

Copied

Kevin Chang無料posted withアプリーチ

まとめ

フリーでも充分なのですが、有料版を使いたいという方は$60支払えば、4,357個のフォントが使えます。よろしければ試してみて下さい。

以上、お読みいただきありがとうございました