Bootstrap v4でFont Awesomeを使おう
概要
Bootstrapのバージョン4がリリースされました。
バージョン4では、今までGlyphiconというアイコンのライブラリが同梱されていたのですが、それがなくなりました。
そのため、Glyphiconを使いたければ、自分自身で用意する必要があります。
しかし、今まで使っていたGlyphiconの無料版では昔と今を比べるとアイコンの数が減ったため、満足に使うには有料版を使わないといけない可能性が高いです。
実際にBootstrapでも、Glyphiconが同梱されなくなった際の代替として、有料であるGlyphiconの上位バージョンを使用することが推奨されています。
実は、Bootstrapでは、Glyphiconの代替としていくつか提案されており、その中に無料でたくさんのアイコンを使うことができるFont Awesomeというものがあります。
ここでは、Font Awesomeの使い方を紹介します。
Font Awesome
Font Awesomeでは、Glyphiconよりもたくさんのアイコンを使うことができます。
この記事の執筆時点では、バージョン4とバージョン5の両方を使うことができるのですが、今であればバージョン5を使うべきでしょう。
そのため、この記事ではバージョン5を使います。
Font Awesomeのサイトは次からアクセスできます。
インストール(CDN)
CDNを使うと簡単にFont Awesomeを使うことができます。
そのため、まずCDNを使った方法を紹介します。
Font Awesomeでは、JavaScriptのファイルを読み込むことでアイコンを使うことができるようになるので、次のJavaScriptファイルの読み込みをHTML内に書きます。
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
途中にv5.0.6というものがありますが、ここは最新バージョンに応じて変えておきましょう。
これで、Font Awesomeを使うことができます。
インストール（ダウンロード）
次に、直接ファイルをダウンロードする方法を紹介します。
ファイルは次のURLからダウンロードできます。
Download Font Awesome Free というボタンがあるのでそこをクリックするとダウンロードできます。
ファイルをダウンロードすると、zip形式のファイルなので、それを解凍して使いたい場所に移動します。
移動したら、使うためにはJavaScriptのファイルを読み込む必要があるので次のJavaScriptファイルの読み込みをHTML内に書きます。
<script defer src="/fontawesome-free-5.0.6/svg-with-js/js/fontawesome-all.js"></script>
5.0.6という数字はバージョンの数字なので、利用しているバージョンによって変わります。
これで、Font Awesomeを使うことができます。
使い方
使うことができるアイコンは次のURLから確認できます。
左側にFreeと書かれているボタンがあるので、それをクリックしてチェックを入れると無料で使うことができるアイコンのみを表示できます。
後は、検索ボックスを使ってアイコンを検索しましょう。
使いたいアイコンが見つかったら、そのアイコンをクリックします。
今回は、thumbs-upというアイコンを使います。
このアイコンをクリックすると表示されるページに、アイコンを使用するためのHTMLが記述されています。
thumbs-upの場合は次のHTMLです。
<i class="far fa-thumbs-up"></i>
このような、iタグを記述することでアイコンを使うことができます。
まとめ
アイコンを使ってみようとした際に分かったかもしれませんが、かなりの数のアイコンを無料で使うことができます。
導入も楽なので、使ってみることをおすすめします。