アイコンフォントは以前、入手こそ簡単でしたが、WordPressサイトへの導入手順は複雑でした。スプライトを使えば多少は効率化されましたが、Retinaスクリーンの登場によって、この課題は深刻化。

こうした問題を解決する最も一般的な方法は、アイコンフォントを使用すること。アイコンはフォントとして扱え、ベクター形式なので、好きなだけ拡大縮小が可能です。また複数のアイコンを1つのファイルにまとめることができるため、リクエスト数も大幅に削減されます。これによって、あらゆるアイコンを使用できるようになります。ただし、パフォーマンスに関して考慮すべき点もあります。

この記事では、WordPressでアイコンフォントを使用する様々な方法と、入手先、サイトに合った最適な方法をご紹介します。

アイコンフォントの入手方法

Googleで「アイコンフォント」と検索すれば、多数のサイトが見つかります。最も人気で、よく使われているのは「Font Awesome」です。本記事の執筆時点で、1,400以上の無料アイコンと、4,500以上の有料アイコンが利用できます。サイトUI用のものからSNSアイコン、矢印など、ほぼすべての種類のアイコンを網羅しています。

Font Awesomeのアイコン
Font Awesomeのアイコン

アイコン提供サイトは他にもありますので、チェックしてみてください。

  • IcoMoon：5,500以上の無料ベクターアイコンと、4,000以上の有料アイコンが利用できる人気のサービス。本記事の解説でも取り上げます。
  • Fontello：アイコンフォントを探してビルドできる便利なサービス。
  • Bytesize：超軽量のアイコンセット。全84個のアイコンは、圧縮すればたったの9KB（SVGZまたはGzippedでは2KB）。
  • シンプルにSVGアイコンを使いたいなら、無料ライブラリが充実した「iconmonstr」、有料ライブラリが充実した「Iconfinder」がおすすめ

WordPressでアイコンフォントを手軽に今すぐ使う方法

まずは、WordPressで簡単にアイコンフォントを使用する方法をご紹介します。ただしこれらの方法は、パフォーマンスの観点ではベストではないことを念頭に置いてください。パフォーマンスを重視する場合は、「必要なアイコンのみローカルにホストする方法」セクションに移動してください。

方法1―WordPressプラグインを使用する

WordPressにアイコンフォントを導入する最も手っ取り早い方法は、第三者の開発者が提供しているプラグインを使うことです。無料プラグインFont Awesome Integrationには、最新のFont Awesome 5アイコンライブラリが含まれています。インストールして有効化すれば、あとは簡単なショートコードを使うだけでアイコンを挿入できます。WordPressのアイコンも用意されています。

Font Awesome 5基本的な使用方法をはこちらをご覧ください。カスタマイズ方法や、アイコンライブラリについて解説しています。以下のサンプルコードでは、Font Awesomeを使用して、WordPressアイコンをGutenbergのショートコードブロックに入力し、クラスにfa-3xを追加して大きさを3倍に指定しています。

[fawesome iclass="fab fa-wordpress fa-3x"]
GutenbergのFont Awesomeショートコード
GutenbergのFont Awesomeショートコード

実際の投稿内ではこのように表示されます。とても簡単に、ほんの数分でFont Awesomeのアイコンがサイトに表示されました。

WordPress 5.0でのFont Awesome使用例
WordPress 5.0でのFont Awesome使用例

Shortcodes Ultimateプラグインを使用すれば、豊富に用意された便利なショートコードを活用できますし、有料アイコンのアドオンもあります。

以上の方法は、投稿や固定ページにアイコンを追加したい場合にエディター内だけで実装でき便利ですが、テーマやプラグイン内でアイコンを使用するには、自分でエンキューする方法がベストです。以下でさらに詳しく説明していきます。

方法2―付属のDashiconsを使用する

Dashiconsは、WordPress本体に同梱され、管理画面で使われているアイコンフォントのセットです。管理画面外で使用するには、スクリプト名をエンキューするだけで利用でき、ファイルの用意は不要です。

以下のコードをfunctions.phpファイルに追加すれば利用できますが、無料プラグインCode Snippetsを使用した方法のほうがおすすめです。テーマが壊れるリスクを最小限に抑えられますし、テーマをアップデートしても影響がありません。

function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}

その後、Dashiconsのサイトを開き、アイコンを選んで「Copy HTML」リンクをクリックして、アイコンの表示に必要なコードをコピーします。アイコンの種類はそれほど多くありませんが、とても軽量で便利な機能です。

<span class="dashicons dashicons-admin-post"></span>

以下のスクリーンショットでは、GutenbergのHTMLブロックにダッシュボードアイコンを挿入しています。

Gutenberg HTMLブロック内のDashicons
Gutenberg HTMLブロック内のDashicons

実際のサイト上の表示はこのようになります。

WordPress 5.0でのDashiconsの例
WordPress 5.0でのDashiconsの例

Dashiconsにはショートコードは用意されていませんが、CSSでアイコンサイズをカスタマイズできます。見出しの直前にアイコンを挿入する場合、以下のようなコードが使用できます。

<h2 class="dashicons-before dashicons-smiley">見出し</h2>

方法3―外部ホストのアイコンフォントにリンクする

3つ目の方法は、外部でホストされているアイコンフォントにリンクする方法です。先ほどご紹介した方法1ではプラグインが同様の処理を行いますが、この項目では自分で実装する方法をご紹介します。

Font Awesomeを使用する場合、Startページからコードを取得し、設置していきます。Font AwesomeはすべてのフォントをCDNにホスティングしており、無料で利用できます。設置するコードは以下のようになります。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">

手順1

コピーしてきたコードを、Font Awesomeを使用するWordPressサイトの各テンプレートまたはページの<head>内に貼り付けます。テーマのheader.phpファイルを編集するか、ヘッダーにコードを追加する方法を参考にしてください。

手順2

次に、HTMLの<body>内に、使用したいアイコンのコードを貼り付けます。適切なアイコンの見つけ方と、ページへの追加方法の解説記事もご覧ください。

アイコンフォント使用時のパフォーマンスを考慮する

上記の方法は、サイトにアイコンフォントを追加する方法として間違っていないのですが、パフォーマンスの観点では、技術面でベストな方法とは言えません。

使い切れない大量のアイコン

まず、アイコンフォントのプラグインの使用や、外部のアイコンフォントライブラリにリンクすると、そのライブラリ全体のアイコンをすべて読み込むことになってしまいます。サイト全体で20個程度のアイコンしか使用しないのであれば、もっと別の方法で処理したほうがいいでしょう。

以下の例は、サイトにFont Awesome 5ライブラリを読み込んだものです。ライブラリCSSのファイルサイズは小さいですが、フォントファイル自体は108KBあります。それほど大きく感じないかもしれませんが、実際に使うHTMLフォントだけを選択すると、ファイルがどれほど小さくなるか、後ほど解説します。

大きなFont Awesomeライブラリ
大きなFont Awesomeライブラリ

同じCDNから読み込む方が速い

複数の異なるCDNからスクリプトを読み込んでも問題はありませんが、可能であれば1つのCDNから読み込んだほうが速くなるのが一般的です。単一のHTTP/2接続が利用できれば、追加のDNSルックアップを減らすことができるためです。メインのCDNには良質なものを選んでください。

必要なアイコンのみローカルにホストする方法

上記のパフォーマンス上の理由から、ここからはアイコンフォントをローカルでホストする方法と、必要なものだけ選んで使用する方法を解説していきます。ローカルでというのは、WordPressをホストしているサーバー、または独自のCDNから読み込むという意味です。

必要なアイコンフォントだけを選ぶことで、ファイルサイズを100KBから数KBに減らすことができ、とても便利です。しかも、異なるフォントセットから、アイコンを組み合わせて使うことも可能です。

実装の概要と仕組み

アイコンフォントを使用するには、フォントファイル（WOFF、WOFF 2など）をサーバーにホスティングし、CSSを使用してフォントフェイスを読み込み、マークアップによってアイコンを適切な場所に追加します。

サイトが実際に読み込むファイルは1つですが、ブラウザによって対応している形式が異なるため、各フォントには複数のファイル形式が用意されています。Font Awesomeでは6種類のファイル形式（EOT、SVG、TTF、WOFF、WOFF 2、OTF）が用意されていますが、ブラウザの対応状況を鑑みて、実際に必要なのは「WOFF」と「WOFF 2」だけです。

補足）「WOFF」は、全モダンブラウザの93％以上、より圧縮率の高い「WOFF 2」は83％以上でサポートされているため、このいずれか、または両方を選択することをおすすめします。ブラウザがサイトのコードに基づき、どちらを配信するかを決定します。

おおまかな実装の流れは、まず、ツールを使って必要なアイコンを選びます。アイコンフォントのファイルが完成したら、プロジェクトディレクトリ内（通常はフォント用のディレクトリ）に保存します。

次に、Font Awesome のCSSファイルをディレクトリに配置し、リンクタグを使ってサイトに追加します。

<link rel="stylesheet" href="css/font-awesome.min.css">

CSSファイルをエンキューしたり、短い場合はインラインで設置してもいいでしょう。

実際の挙動を知るには、CSSファイルの内容を見てみてください。フォントファイルを読み込み、クラスに.faがついたタグにスタイルを定義し、他にもいくつかのスタイリングを行い、最後に各アイコン名ごとにアイコンを定義します（例：.fa-book）。

フォントファイルのパス指定に注意が必要です。デフォルトでは、対象のCSSファイルから1つ上のフォルダにあるフォントディレクトリ../fontsから読み込みます。これはサイトのディレクトリ構造に合わせて変更してください。

概要は以上です。以下、順を追って実装方法を解説します。この例では、とある実在のECサイトのフォント実装内容を再現しています。

手順1

まず、使用するアイコンフォントライブラリを決定します。この記事の前半で、すでにおすすめのアイコンフォントライブラリを紹介しましたが、この例では、Font Awesomeと、IcoMoonフォントジェネレーターを使用します。IcoMoonでWOFF 2ファイルを生成するには、有料ライブラリが必要です。料金は9ドルで、1回の支払いでずっと使用できます。

Font Awesomeアイコンは無料でダウンロードできますが、WOFFまたはWOFF 2を手動で編集する必要があります。FontForgeなどのツールもありますが、ここでは手軽さを重視し、ジェネレーターを使用します。

手順2

IcoMoonジェネレーターを開き、Font Awesomeライブラリの「Add」をクリックします。

IcoMoon Font Awesome ライブラリ
IcoMoon Font Awesome ライブラリ

手順3

次に、WordPressサイトで使用したいアイコンを選びます。すでにFont Awesomeを使用していて、ホスト場所をローカルへ移行するだけであれば、使用中のアイコンをリストアップして、ライブラリから選択します。

Font Awesomeアイコンを選ぶ
Font Awesomeアイコンを選ぶ

この例では、Easy Digital Downloadsプラグインの販売サイト「perfmatters.io」で使用されているアイコンを選択しました。

手順4

すべてのアイコンを選んだら、一番下にある「Generate Font」を選択します。下のスクリーンショットでは20個のアイコンを選択しています。

IcoMoonエクスポートからのFont Awesomeアイコン
IcoMoonエクスポートからのFont Awesomeアイコン

ファイルの内容は以下のスクリーンショットのようになります。この中から、style.cssファイルと、フォントファイル（WOFF、WOFF 2）を使用していきます。

アイコンフォントのファイル
アイコンフォントのファイル

手順5

サイトにアップロードする前に、style.cssの内容を、検索と置換を行うことをおすすめします。元のファイルは以下のようになっています。

IcoMoonのCSSファイル
IcoMoonのCSSファイル

すでにサイトでFont Awesomeを使用している場合、Font Awesomeのクラス名に変更するだけで、既にWordPressサイト上でコーディング済みのアイコンに適用できます。

ファイル内を「icon」で検索し、該当箇所をすべて「fa」に置き換えます。Sublimeなどのテキストエディターを使えば、すばやく検索、置換できます。

Sublimeでの検索と置換
Sublimeでの検索と置換

上のスクリーンショットでは、[class^="icon-"], [class*=" icon-"]を[class^="fa-"], [class*=" fa-"]に置き換えます。また、各アイコンも修正され、.icon- から始まるのではなく、.fa- から始まるようになります。

この後の手順7で、フォントファイルをアップロードする場所に応じて、ソースURLの変更が必要な場合があります。指定URLは、独自CDNへ変更することをおすすめします。

手順6

サイトにCSSを追加します。追加方法は3通りあります。

方法1

CSSが数行しかないなら、ファイル内のCSSをすべてコピーして、WordPressカスタマイザーに貼り付けてもいいでしょう。ファイルが大きい場合、この方法は絶対に行わないでください。サイトにインラインで読み込まれてしまいます。

方法2

WordPressサイトヘッダーにリンクタグを配置して、直接スタイルシートへリンクします。さらにパフォーマンスを高めるには、リンク先を独自のCDNにしてください。

<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">

方法3

WordPressでCSSファイルをエンキューすることもできます。出力結果は、直接コードを追加する場合と似たものになります。テーマのfunctions.phpファイルに以下のコードを追加するか、無料のCode Snippetsプラグインを使用します。ディレクトリは、アップロード場所に応じて変更してください。

function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

手順7

CSSをサイトに追加したら、次はフォントファイルをアップロードします。配置場所はどこでもかまいません。/publicディレクトリに「fonts」というフォルダを設置することもできます。フォルダ配置場所はstyle.cssファイル内で指定したソースフォルダと一致するようにします。

アイコンフォントファイル SFTP
アイコンフォントファイル SFTP

手順8

これで、WordPressサイトがCSSファイルとフォントファイルの両方を読み込むようになりました。次に、サイトにマークアップを追加します。以下のサンプルコードは、歯車アイコンを追加します。

<i class="fa fa-cog"></i>

実装例として、perfmatters.ioサイトをご紹介します。アイコンを指定するタグは、iに限定する必要はありません。どのようなタグにも使用できることを覚えておいてください。CSSにカスタムクラスを追加すれば、spanタグも使用できます。

PerfmattersのFont Awesome実装例
PerfmattersのFont Awesome実装例

本当の違いは、サイズの違いを見たときにわかります。先ほど、Font Awesome外部ライブラリにリンクした場合、フォントファイルの総サイズは108KBでしたが、フォントジェネレーターによってサイトに必要なFont Awesomeアイコンのみを選んだところ、2.6KBになりました。フォントファイルのサイズが、なんと97.59%も小さくなりました。

WOFF 2 Font Awesomeファイルのサイズ
WOFF 2 Font Awesomeファイルのサイズ

それだけでなく、読み込み先を独自CDNに変更したため、fontawesome.comへの余分なDNSルックアップが不要になりました。

SVGアイコンを使用する場合、一部異なりますが、ほぼ同じ方法で実装できます。

アイコンフォントのアクセシビリティに関する懸念

アイコンフォントの欠点は、アクセシビリティ関する懸念があります。スクリーンリーダーが読み飛ばすならまだいいのですが、ユニコードや文字そのものを読み上げてしまうかもしれません。これでは、視覚障がい者がサイトメニューにフォーカスしたとき、「お気に入り」のところで「黄色い星 お気に入り」と読み上げられてしまいます。また、フォントが読み込まれなかった場合のことも考慮する必要があります。

読み込まれなかった場合の仕様として、飾りのアイコンは単に消え、機能的で重要なアイコンはテキストに置き換わるようにしたいところです。

これは比較的簡単に実装できます。対象のタグに属性と値を追加し、aria-hidden="true"と定義すると、スクリーンリーダーにタグを無視するよう指定できます。

<span class="icon icon-star" aria-hidden="true"></span> お気に入り

より完全な実装にするには、Modernizrでフォントフェイス対応状況を確認してください。CSSを少し修正する必要があります。詳細は、Bulletproof Font Iconsの解説記事を参照してください。

上記リンク先の記事では、重要なアイコンにテキストフォールバックを実装する高度な方法についても解説しています。

まとめ

以上、アイコンフォントについて解説してきました。WordPressサイトへのアイコンフォント追加について、手軽にできる方法がいくつかあることと、さらに、パフォーマンスを考慮した理想的な導入方法についてもお分かりいただけたと思います。

可能な限りフォントジェネレーターを使用し、実際に必要なアイコンのみで構成したアイコンフォントを作成することをおすすめします。そうすれば、使用しているWordPressテーマを大幅に軽量化かつ効率化できます。他にもおすすめのライブラリやジェネレーターをご存知の方は、ぜひ以下のコメント欄でお知らせください。また、WordPressサイトのフォントスタイルについてもご紹介しています。

Brian Jackson

Brianの最大の情熱の一つは10年以上使用してきたWordPressです。複数のプレミアムプラグインさえ開発しています。Brianの趣味はブログや映画やハイキングなどです。TwitterでBrianとつながりましょう。