Font Awesomeの導入方法と使い方｜WordPressでアイコンを簡単に表示する手順
login_user目次
この記事では、WordPressサイトにFont Awesome（フォント・オーサム）を導入してアイコンを使う方法を解説します。
Font Awesome を使うと、サイトのデザインがぐっと華やかになります。
アイコンを使うことで、文字だけでは伝わりにくい内容を直感的に表現でき、視覚的にわかりやすくなるからです。
例えば、「電話」「メール」「検索」「SNSリンク」などによく使われるアイコンを簡単に追加でき、見た目に統一感も出せます。
また、SVG形式で軽量・拡大縮小にも強いため、スマホやPCでも美しく表示されます。
1 実装のポイント
- Font Awesomeはアイコンフォントで、CSSクラスを指定するだけで表示可能
- CDNで簡単に導入できる方法を紹介
- HTML内で自由にアイコンを配置可能
※CDNとは Content Delivery Network（コンテンツ・デリバリー・ネットワーク） の略です。簡単に言うと、ウェブサイトの画像・CSS・JavaScriptなどのデータを世界中のサーバーに分散して置き、ユーザーに最も近いサーバーから高速に配信する仕組みです。
2 functions.php にコードを追加（CDN導入例）
//-------------------------------------------
// Font Awesomeを読み込む
//-------------------------------------------
function load_font_awesome() {
wp_enqueue_style(
'font-awesome',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css',
array(),
'6.5.1'
);
}
add_action('wp_enqueue_scripts', 'load_font_awesome');
補足:
- 上記のCDNは最新の6.5系バージョンを使用
- 自分のサーバーにファイルを置く場合は
get_stylesheet_directory_uri()などを使って読み込む - 子テーマやプラグインで読み込む場合は重複しないよう注意
3 HTML内でアイコンを表示
<i class="fab fa-facebook-f"></i> <!-- Facebookアイコン -->
<i class="fab fa-instagram"></i> <!-- Instagramアイコン -->
<i class="fas fa-envelope"></i> <!-- メールアイコン -->
3.1 FontAwesome
FontAwesomeリンク
▶ FontAwesome
4 汎用CSS例
/* -------------------------
* Font Awesome アイコンのサイズや色調整
* ------------------------- */
/* 全アイコン共通の基本スタイル */
.fa {
color: #333; /* デフォルトのアイコン色 */
font-size: 24px; /* アイコンの大きさ */
transition: color 0.2s; /* ホバー時に色を変える際のアニメーション */
}
/* ホバー時に色を変える */
.fa:hover {
color: #1da1f2; /* マウスオーバー時に青色に変化 */
}
/* SNSごとにアイコン色を個別に変更 */
.fa-facebook-f { color: #3b5998; } /* Facebook用の色 */
.fa-twitter { color: #1da1f2; } /* Twitter用の色 */
.fa-instagram { color: #e4405f; } /* Instagram用の色 */
.fa-youtube { color: #ff0000; } /* YouTube用の色 */
5 完成イメージ
6 Font Awesome 6.5 一覧（表用に更新）
| Class名 | Unicode | プレビュー |
|---|---|---|
| fas fa-music | f001 | |
| fas fa-search | f002 | |
| fas fa-envelope | f003 | |
| fas fa-heart | f004 | |
| fas fa-star | f005 | |
| fas fa-star-half | f089 | |
| fas fa-user | f007 | |
| fas fa-film | f008 | |
| fas fa-th-large | f009 | |
| fas fa-th | f00a | |
| fas fa-th-list | f00b | |
| fas fa-check | f00c | |
| fas fa-times | f00d | |
| fas fa-search-plus | f00e | |
| fas fa-search-minus | f010 | |
| fas fa-power-off | f011 | |
| fas fa-signal | f012 | |
| fas fa-cog | f013 | |
| fas fa-trash | f014 | |
| fas fa-home | f015 | |
| fas fa-file | f016 | |
| fas fa-clock | f017 | |
| fas fa-road | f018 | |
| fas fa-download | f019 | |
| fas fa-inbox | f01c | |
| fas fa-play-circle | f01d |
7 代用プラグイン
コードを書くのが難しい場合は、以下のプラグインを使うと簡単にFont Awesomeアイコンを利用できます。
- Better Font Awesome（管理画面で簡単にアイコンを選択可能）
- WP Social Icons（SNS用アイコンとして利用可能）
💡 ポイント：プラグインによっては読み込むバージョンが古い場合がありますので、必要に応じてCDNで最新版を読み込む方法がおすすめです。
8 まとめ
- functions.phpにコードを追加するだけで簡単にFont Awesomeを導入可能
- HTML内で
<i class="fas fa-envelope"></i>のようにクラスを指定するだけでアイコンを表示可能 - CSSで色・サイズ・ホバーエフェクトを自由に調整可能
