Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較

Post on:2020年4月7日

はじめに

アイコンは最近のWebサイトやスマホアプリのUIにおいて欠かせない要素です。アイコンは他のコンポーネントやテキストを補完するために使用され、ビジターにより多くの示唆に富んだビジュアルエクスペリエンスを提供します。

オープンソースのアイコンのデファクトリーダーは、Font Awesomeです。2012年8月12日にリリースされ、現在では38%のシェアを獲得しています。

BootstrapとFont Awesomeのアイコンの比較

Bootstrapのアイコンは、Twitter Bootstrapで使用するためにDave Gandyによって制作されましたが、近年では次のレベルに引き上げられ、アップグレードしたい人のためにPro版もリリースされています。

Bootstrap 3を使用していた人は、フレームワークに付属していたGlyphiconsを覚えているでしょう。残念なことに、Bootstrap 4のリリースでアイコンはBootstrapに含まれなくなり、Font Awesome, Iconic, Ictionsなど他のアイコンライブラリがドキュメントで推奨されています。

近々リリースされるBootstrap 5では、Bootstrap用のアイコンが含まれることが判明しています。公式ブログでアイコンライブラリのリリースが告知されています。
参考: Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ

私は個人的にここ数年Font Awesomeを使用してきましたが、Bootstrapのアイコンのリリースに伴い、いくつかの新しいWebサイトでテストしたいと思いました。この記事では、Bootstrap 5の新しいアイコンとFont Awesomeのアイコンを比較したいと思います。

Font Awesomeのアイコン

Font Awesomeには現在、1,588個の無料アイコンがあり、有料のプロ版にするとさらに7,842個のアイコンが利用できます。アイコンのデザインは非常に高品質で、SVGで利用できるため、任意のサイズを指定しても完璧に見えます。

Font Awesome

Font Awesomeがデフォルトで提供する大きなプールの中から適切なアイコンを見つけられなかったことはほとんどありません。私のサイトThemesbergではプロ版のアイコンを使用しており、デザインのレベルを引き上げたいのであれば、お金を払う価値があると言わざるを得ません。

Font Awesomeのサイトは、特定のアイコンを検索したり、アイコンを使用するために必要なコードを教えてくれたりと、本当によくできています。

また、アイコンのアップデートも適度にされているのは喜ばしいことです。最近では、COVID-19を意識したアイコンセットがリリースされました。

Font Awesomeアイコンの使用方法

Font Awesomeを使い始めるのは非常に簡単で、CDN, NPM, Yarnを使用したり、ソースファイルをダウンロードしたりなど、さまざまな方法が用意されています。

CDNを使用

無料のCDNのリンクを取得し、Webサイトで使用するアイコンを設定することができます。実際に使用するアイコンのみにすることができ、ロードされるデータ量を削減できるので、Font Awesomeを使用する上では最適な方法だと思います。

NPM経由

プロジェクトの依存関係をNPMで管理している場合は、下記でFont Awesomeを含めることができます。

npm install --save @fortawesome/fontawesome-free

1	npm install --save @fortawesome/fontawesome-free

ダウンロード経由

上記の方法を使用したくない場合は、ソースファイルを直接ダウンロードすることもできます。ファイルをダウンロードしたら、下記のようにall.cssを外部ファイルとして、使用するアイコンを記述します。

<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

<head>

</head>

<body>

</body>

Font Awesomeアイコンのさらに詳しい使い方は、下記をご覧ください。

Font Awesome アイコンの使い方と便利な機能のまとめ

Bootstrapのアイコン

Bootstrapのアイコンは、500個の無料アイコンがあり、MITライセンスでオープンソース化されています。これらのアイコンはFigmaで開発され、SVGとしてエクスポートされ、Webフォントとして統合されています。アイコンのルックアンドフィールはFont Awesomeと比べてよりプレミアムになっています。今後、アイコンの数が増えていくことを期待しています。

Bootstrap Icons

私が特に気に入っている点は、プロジェクト全体を含めなくてもWebサイトから直接SVGコードを取得できることです。アイコンにインラインSVGを使用した高品質な多くのプロジェクトを見てきました。

もちろん、アイコンを画像として使用したり、Font Awesomeのアイコンと同様に疑似要素としてアイコンを使用することもできます。

Bootstrapアイコンの使用方法

Bootstrapアイコンの使用方法は、Font Awesomeとは異なり、デフォルトで使用できるclassは提供されず、SVGが直接提供されています。もちろん、必要に応じて、疑似要素を使用して独自のclassを作成することもできます。

SVGの埋め込み

高品質な多くのプロジェクトは、高速でシンプルなため、インラインSVGを使用しています。Bootstrapアイコンのサイトでは、アイコンのいずれかをクリックするだけで、SVGソースをコピーして簡単に利用できます。もちろんサイズやカラーも自由に変更できます。

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

外部画像

HTMLをよりクリーンにしたい場合は、下記のようにimg要素としてSVGアイコンを表示することもできます。

<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

1	<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

CSS

この方法は、Font Awesomeのアイコンをデフォルトで使用する方法と似ています。CSSでclassを作成し、background-imageをSVGのソースに関連付けます。

.bi::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.bi::before {

display: inline-block;

content: "";

background-image: url("data:image/svg+xml,");

background-repeat: no-repeat;

background-size: 1rem 1rem;

}

あとは、HTMLでや要素に.biを使用してアイコンを表示することができます。

結論

現在私が開発しているBootstrapテーマはFont Awesomeアイコンを使用していましたが、すぐにBootstrapアイコンの使用を開始する予定です。

結論として、BootstrapもFont Awesomeも素晴らしく、Webサイトに使用できる高品質なアイコンのセットがあると思います。現在、Font Awesomeは1,588個の無料アイコンがあり、Bootstrapの無料アイコンは先日のアップデートで221個から500個に増えました。約3倍の差がありますが、新しいプロジェクトでBootstrapの新しいアイコンセットを試してみることをお勧めします。