Bootstrapのアイコンfontawesomeを理解する【図解たっぷりBootstrap入門】

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

アイコンを使うとページがぐっとしまります。何か足りなかったようなものを埋めてくれるような感じですね。プロっぽさも作ってくれるのでアイコンはとても大切です。

• アイコン

◎アイコン

アイコンを使いたい場合は、Bootstrapが推奨しているサイトから読み込んで使用します。３つのサイトがBootstrapのサイトで紹介されています。今回はその中から、Font Awesomeというサイトを使用した方法を学んでいきます。まず、以下サイトにアクセスしてください。

https://fontawesome.com/

このサイトのアイコンは、WEBフォントアイコンと呼ばれるものです。これは、通常の画像アイコンと違い、CSSでカラーやサイズを変えられるなどフォントとして扱われるのです。画像は表示する際に、読み込みの時間が若干かかってしまいます。しかし、こちらはフォントという扱いなので、画像よりも早く表示されます。

では、使い方について確認していきます。まず、トップページのナビゲーションから「Get started」を選択します。次に、以下赤枠部分のコードをコピーしてください。これは、Bootstrap導入の際と同じCDNです。このサイトのアイコンを使用する為の準備の方法は、ダウンロードとCDNの２種類あります。今回は、CDNで行なっていきます。

上記がそのコードです。これを、「index.html」の

タグ内に貼り付けて下さい。これで、アイコンを使う準備が整いました。とても、簡単ですね。

次に、使用するアイコンを選びましょう。ナビゲーションから「Icons」を選択し、アイコン一覧のページに移動します。アイコンの色が、２色ありますね。これは、ブラックが無料で使えるもの、薄いグレーが有料のものという意味です。今回は、無料のものを選択します。どれでも構いませんので、アイコン部分を押下してみましょう。

以下イメージをみてください。これは、Amazonのアイコンです。今回はAmazonを取り上げますが、他にもツイッターやフェイスブックなどのアイコンも存在します。サイト制作の際に、よく使うアイコンがそろっています。また、以下イメージを見てもらうとわかるように、カラーが設定されているように見えますね。これは、こんな風にカスタマイズ出来ますというような例になります。デフォルトのカラーはブラックなので気にせず進めていきましょう。

使用するアイコンが決まったら、以下赤枠部分のコードをコピーします。あとは、HTMLファイルに貼り付けるだけです。

実際に貼り付けてもらうと分かるかと思いますが、デフォルトのサイズは少し小さめです。ですので、任意のサイズにカスタマイズしてみます。

青いハイライト部分を、貼り付けたアイコンのコードに追加します。サイズごとに、CSSクラスがありますね。

また、カラーを変更したい場合は、クラス部分にオリジナルのCSSクラスを追加します。そして、CSSファイルの方で「color: #333;」というように色を指定してください。

◎LP制作④

前回は、テキストやボタンを追加しました。今回は「flex」で整列などの細かい部分の調整を行いましょう。また、アイコンも追加してみましょう。まず、整列などから行なっていきます。マージンもBootstrapで用意されているCSSクラスを使うように変更します。

CSSファイルで色々と細かく指定するよりも、用意されたクラスを使う方が素早く簡単に行えることがわかると思います。

では、次にアイコンを使っていきましょう。先ほどの項目を参考に、アイコンを使う準備をしてみてください。そして、どのアイコンでも構いませんので3つ選び配置してみましょう。

ここでも、flexやマージンのCSSクラスを使っています。これらを使う機会は多いと思いますので、慣れておきましょう。

ここまでを、うまく行えた場合の完成イメージです。アイコンの種類や写真は異なっていて構いませんが、配置などは同じように作る事が出来ていますでしょうか？

◎まとめ

・サイト制作の際、頻繁に使用するマージンなどもCSSクラスが用意されている

・flexで複数の要素を美しく並べる

・また、きれいに整列させる

・Bootstrapが推奨するアイコンは、WEBフォントアイコンである

・画像アイコンと違い、CSSで簡単にサイズやカラーを変更できる