Font Awesome（フォントオーサム）をインストールする方法と使い方

WordPressで自分オリジナルのブログを作るなら、おしゃれなデザインやボタンをわかりやすく表示するデザインなど、Webアイコンは欠かせません。

プラグイン「Font Awesome（フォントオーサム）」を使うと、ブログで様々なWebアイコンを表示させることができます。

今回は、「Font Awesome（フォントオーサム）」のインストールから設定、具体的な活用方法まで、わかりやすく解説していく記事です。

Font Awesome で利用できるアイコン例

Font Awesome（ https://fontawesome.com/icons ）アイコン例

シンプルで使いやすい2,000種類以上のアイコンが無料で利用できます。

プラグインをインストールせずにFont Awesomeを利用する方法もありますが、コードの設定など難しい部分があるので、今回はプラグインでの解説になります。

こんな人におすすめ

Webアイコンを設定したい人
プラグインのインストールと設定をしたい人
ブログのデザインを変更したい人

この記事を最後まで読むとできるようになること

Font Awesomeの追加される機能がわかる
Font Awesomeの効果がわかる
Font Awesomeの設定方法がわかる

さとし

それでは、Font Awesome（フォントオーサム）をインストールする方法と使い方、を解説していきますね！！

＼国内シェアNo.1 レンタルサーバー／

＼お友達紹介プログラムあり／

＼ブログを始めるなら賢くお得に／

エックスサーバーに移動する

このリンクから始めると最大10,000円割引き！！

さらに「 初期費用無料＆ドメイン永久無料」なので、WordPressブログを始めるならエックスサーバー一択ですね！！

Font Awesome（フォントオーサム）で追加される機能

Font Awesomeは、さまざまなアイコンを簡単に追加できるツールです。

特にWordPressプラグインを利用すると、コードを書くことなくアイコンをブログに挿入することができます。

商用利用も可能なうえ、サイズや色を変更することも可能。

具体的には、以下のような機能が追加されます。

追加される機能

デザインの向上：多様なアイコンを使用して、ブログのデザイン性を高めることができる。
ユーザー体験の向上：視覚的な情報提供を通じて、訪問者がコンテンツを理解しやすくする。
ブランド一貫性の維持：アイコンを利用して、ブランドの一貫したイメージを伝えられる。

Font Awesomeの効果

視認性の向上

テキストだけでなく、アイコンを使用することでコンテンツの視認性が向上します。

ナビゲーションの強化

メニューやボタンにアイコンを追加することで、ユーザビリティが向上します。

SEO効果

Webアイコンを適切に利用することで、読者の滞在時間が延びるため、間接的にSEOにも良い影響を与えます。

Font Awesomeの料金体系

Font Awesomeは無料で利用できるプラグイン。

有料のプラン（人気のPro版で99ドル＝約16,000円／年）もありますが、無料版でも2,000種類以上のアイコンが利用できます。

たしかに有料のプランで利用できるアイコンのほうがクオリティは高いのですが、シンプルなデザインでも問題なければ、まずは無料版で試してみましょう。

Font Awesomeのインストールと設定方法

Font Awesomeプラグインのインストール

インストール手順は以下のとおりです。

WordPressダッシュボードにログイン
ダッシュボードの左側メニューの「プラグイン」の検索→「新規追加」
検索バーに「Font Awesome」と入力
検索結果から「Font Awesome」を見つけて「今すぐインストール」
最後に「有効化」します。

Font Awesomeプラグインの設定方法

設定の手順は以下のとおりです。

ダッシュボードの左側のメニューから「設定」 > 「Font Awesome」を選択
今回は使い方が簡単な「Use CDN」を選択
Icon：Proは有料なので、無料のFreeを選択します。
Technology：「Web Font」のままでOK
Version：latest（最新バージョン）を選択
Older Version Compatibility：「On」を選択

設定が完了したら、Save Chennges（設定を保存）をして設定を反映させます。

Font Awesomeの使い方

Font Awesome サイト

Font Awesome のサイト（ https://fontawesome.com/icons ）は こちら から

Font Awesomeのサイトを開きます。

ページ上部の「Icons」をクリック

Font Awesome Total icons in Font Awesome 6 Pro

「Total icons in Font Awesome 6 Pro」をクリック

たくさんのアイコンが表示されます。

そのままだと有料版のアイコンも含まれているので「Free」をクリックして「無料で利用できるアイコンだけ」に絞り込みます。

気になるアイコンがみつかったらクリックして開きます。

「HTML」の下に表示された「＜i class="fa-solid fa-heart"＞＜/i＞」をクリックしてコピーします。

ブログの記事でアイコンを利用したい場合は、ブロックエディタの「カスタムHTML」に、さきほどコピーした「＜i class="fa-solid fa-heart"＞＜/i＞」を貼り付けたら完了です。

↑↑↑ このようなデザインのアイコンが表示されます。

Font Awesomeの具体的な活用方法

Font Awesomeのアイコンは、さまざまな場所で活用できます。

Font Awesomeの具体的な活用方法は現在作成中。後日アップしますのでお楽しみに。

このページを「ブックマーク」してお待ちください。