WordPressにFont Awesomeを導入する方法と使い方

WordPressにFont Awesomeを導入する方法と使い方

WordPressでFont Awesomeを使う方法をまとめておきます。

目次

準備

いずれかの方法でFont Awesomeを使う準備を完了させて下さい。

個人的には、ブロックエディターにも対応している公式プラグインが一番おすすめです。他の方法は、記事編集画面でアイコンを挿入する際に手間がかかります(CSSに組み込む程度なら問題ない)。

また、最初からFont Awesomeのコードが組み込まれているテーマでは設定不要です。

公式プラグインを追加する

Font Awesomeを追加&有効化して、管理画面の設定「Font Awesome」から各種設定を行います。

プラグイン「Font Awesome」の設定

スクロールできます
詳細
How are you using Font Awesome? Font Awesomeのファイルを読み込む方法
(登録なしで使えるUse CDNを選択)
Icons 有料版or無料版
(無料のfreeを選択)
Technology フレームワーク
(Web Fontを選択)
Version バージョン
(最新版を選択)
Version 4 Compatibility バージョン4との互換性
(onにするとバージョン4のアイコンも表示できる)

Technologyは「Web Font」推奨なのですが、上手く表示されない時は「SVG」を選択して下さい。

プラグインを追加する方法は、通常の使い方以外にもショートコードが使えます。

公開されているCDNコードを利用する(Version 6.0.0)

下記のCDNコードをコピーして、テーマヘッダーheader.phpに貼り付けます。

公開されているCDNコードを使う方法は、最新バージョンが公開された際に新しく追加されたフォントアイコンが使えないデメリットがあります。また、Font Awesome 4から移行する場合も、一部のアイコンが表示されなくなる可能性があるので注意して下さい(個人的には非推奨)。

登録してキットコードを利用する

Start | Font Awesomeでメールアドレスを入力して、専用のキットコードを入手します。

特に躓くところはないので、手順通り進んで登録を完了させて下さい。

メールアドレスを入力して、「Sand Kit Code」をクリック

後は、あなた専用のキットコードをテーマヘッダーheader.phpに貼り付けるだけです。

使い方

基本はHTMLタグをコピーして「iタグ」を挿入しますが、プラグインはショートコードも使えます。

iタグで挿入する方法

アイコン一覧から、バージョンを選択してアイコンを検索します(無料版は「Free」にチェックを入れる)。

「Free」にチェックを入れてアイコンを検索

使いたいアイコンをクリックして、表示された「iタグ」をコピーします。

使いたいアイコンのタグをコピー

後はブログの表示させたい場所に貼り付けるだけです。

但し、ブロックエディターでは、そのままiタグを貼り付けることができません。ブロックを「HTMLとして編集」に切り替える必要があるので、かなり使い勝手が悪いです。

ショートコードで挿入する方法

公式プラグインを追加すると、エディターに専用ボタンが追加されます。

ブロックエディターの場合は、編集タブの「Font Awesome icon」ボタンをクリックします。

ブロックエディターでFont Awesomeを使う

アイコン一覧が表示されるので、使いたいアイコンを選択します。

Font Awesomeのアイコン一覧

記事内にFont Awesomeのショートコードが挿入されます。

Font Awesomeのショートコードが挿入される

クラシックエディターの場合も同様、タグボタンから挿入することができます。

「Font Awesome」ボタンをクリック

記事内でFont Awesomeを多用する場合は、プラグインの導入推奨です。

わざわざHTML編集に切り替える必要がないので、作業効率が格段に上がります。

スタイリングの変更

スタイリングを変更したい時は、iタグ及びショートコードにクラス属性を追加します。

スクロールできます
参考ページ
大きさの変更 Sizing Icons
固定幅 Fixed Width Icons
リストアイコン Icons in a List
回転 Rotate Icons
アニメーション(動く) Animating Icons
配置と枠線 Bordered & Pulled Icons
合成 Stacking Icons
トランスフォーム Power Transforms
マスキング Masking
レイヤリング Layering Text & Counters
テキストカウンターの階層化 Layering Text & Counters
2色カラー Duotone Icons

※赤字はSVGでのみ使用可・青字は有料のPro版でのみ使用可

一部のスタイリングは「SVG」でしか機能しません。途中で「SVG」から「Web Font」に切り替えた場合は、一部のスタイリングが機能しなくなるので注意して下さい。

最後に

僕は普段テキストエディターを使用しているので気にならなかったのですが、ブロックエディターやビジュアルエディターでは、iタグで挿入する方法は使い勝手が悪い気がします(空タグが表示されないため)。

メニューアイコンやCSSの中に組み込む程度なら特に問題ありませんが、記事編集時にFont Awesomeを多用している方は、作業効率が上がる公式プラグインの導入をおすすめします。

スポンサーリンク
スポンサーリンク

スポンサーリンク

この記事を書いた人

このブログでは、管理人が学んだこと、体験したこと、購入した商品を好き勝手レビューしています。また、できるだけ正確な情報を伝えるよう心がけてはいますが、古い情報や間違った情報を掲載している可能性があります。

気づかれましたら、遠慮なくコメントして頂けるとうれしいです。

関連コンテンツ

コメント

コメントする

目次
閉じる