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

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

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

目次

準備

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

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

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

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

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

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

スタイリングを追加して上手く表示されない時は、Technologyで「SVG」を選択して下さい。

プラグインを追加する方法は、通常の使い方以外にもショートコードで挿入できるのがメリットです。

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

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

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

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

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

CDNコードを利用する(Version 6.4.2)

下記のCDNコードをテーマヘッダー(header.php)の<head></head>の間に貼り付けます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">

CDNコードを使う方法は、最新バージョンが公開された際にコードを更新する手間がかかります。更新は必須ではありませんが、新しく追加されたフォントアイコンが使えません。また、Font Awesome 4から移行する場合も、一部のアイコンが表示されなくなる可能性があるので注意して下さい。

有料版のProもCDNコードでは利用できません。

使い方

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

iタグで挿入する方法

アイコン検索から、使いたいアイコンを検索します(無料版の方は「Free」にチェックを入れる)。

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

使いたいアイコンを選択して、表示されたiタグをコピーします。

使いたいアイコンのタグをコピー
<i class="fa-brands fa-wordpress"></i>

表示させたい場所にコードを貼り付けるとアイコンが表示されますが、ブロックエディターでは空のiタグをそのまま貼り付けることができません。一度ブロックを「HTMLとして編集」に切り替える必要があります。

HTML編集に切り替えてiタグ貼り付ける

編集後はビジュアルモードに戻しても構いませんが、少し使い勝手が悪い気がします。

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

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

アイコンを表示させたい場所で、ツールバーオプションの「Font Awesome icon」をクリックします。

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

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

Font Awesomeのアイコン一覧

記事内にFont Awesomeのショートコードが挿入されます(ブログ上ではアイコンとして表示されます)。

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

わざわざHTML編集に切り替える必要がないですし、編集画面からアイコンを検索できるので、作業効率が格段に上がります。記事内でFont Awesomeを多用する場合は、プラグインの導入推奨です。

スタイリングの変更

スタイリングを変更したい時は、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
※2色カラーはPro版でのみ使用可

スタイリングを追加して、アイコンの大きさを変更したり、アニメーションを追加することもできます。

サンプル

Styling with Font Awesome | Font Awesome Docs

最後に

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

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

よかったらシェアしてね!

- シンプルなのに、高機能 -

swell_pr_banner

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

ブロックエディター完全対応のWordPressテーマ。

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次