アイコン(fontawesome)の追加方法を理解する【図解たっぷりBootstrap入門】

吉田先生

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

 

 

アイコン

アイコンを使いたい場合は、Bootstrapが推奨しているサイトから読み込んで使用します。３つのサイトがBootstrapのサイトで紹介されています。

今回はその中から、Font Awesomeというサイトを使用した方法を学んでいきます。

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

 

 

Font Awesome使用準備

では、使い方について確認していきます。 まず、以下サイトにアクセスしてみましょう。 https://fontawesome.com/

 

トップページのナビゲーションから「Start for Free」を選択します。 するとメースアドレスを登録してね、という画面が表示されるはずです。 以前は無条件でダウンロードとCDNの２種類の方法が使えたのですが、現在CDN版は会員登録をしないと使えない仕様になっています。

登録しなくてもダウンロード版は使用できますが、今回の課題以外にも「Font Awesome」を使用する機会は少なくありません。登録してCDN版を使用した方が手軽ではあります。

 

 

A.登録してCND版を使用する

Font AwesomeのCDN版を使用する場合は画面に従って フォームにEmailアドレスを入力し、 「Send kit Code」のボタンをクリックします。

メール確認して下さい、という表示に変わります。

 

登録したアドレスにFont Awesomeから「Confirm Your Font Awesome Account Email Address」というメールが届きます。

「Click to Confirm Your Email Address + Set Things Up」ボタンをクリック。 ↓ パスワードを登録する画面が開きます。 同じパスワードを２回入力して「Set Password & Continue」をクリック。

 

アンケート画面が表示されます。 こちら任意なので、面倒ならば「No thanks. Let’s skip this step for now」ボタンをクリックでスキップして下さい。

 

これで登録は完了です。 そのままCDNコードが表示されている画面に移った場合は、コードをコピーしてください。

 

コード画面が開かない場合はFont Awesomeにログインし、 ①ユーザーアイコンをクリックしてサイドメニューを開く ②サイドメニューから「Font Awesome CDN」をクリック これでCDNコードの画面に移動できるはずです。

 

コピーしたコードは、アイコンを使用したいHTMLファイルの<head>～</head>内に貼り付けてください。

 

 

B.登録したくない方

ダウンロード版を使い場合は「Start for Free」クリック後のページ、メールアドレス入力フォーム下にある「Download」ボタンからダウンロードして使用することもできます。

 

「Download」ボタンをクリックするとダウンロードページが開くので、 「Download Font Awesome Free for the Web」をクリック。

ダウンロードしたフォルダを解凍し、 jsディレクトリから「all.min.js」を作成中のフォルダ内に移してリンクを張ります。 例えばjsフォルダを作ってその中に「all.min.js」を入れた場合であれば

<script src="js/all.min.js"></script>

ですね。 ちょっと面倒なので、不安な方はCDN版を使ってみてください。

 

 

アイコンを挿入する

準備が整ったので、使用するアイコンを選びましょう。

ナビゲーションから「Icons」を選択し、アイコン一覧のページに移動します。

アイコンの色が、２色ありますね。これは、ブラックが無料で使えるもの、薄いグレーが有料のものという意味です。今回は、無料のものを選択します。どれでも構いませんので、アイコン部分を押下してみましょう。

 

上図で選んだものは、Amazonのアイコンです。 今回はAmazonを取り上げますが、他にもツイッターやフェイスブックなどのアイコンも存在します。サイト制作の際に、よく使うアイコンがそろっています。

また、以下イメージを見てもらうとわかるように、カラーが設定されているように見えますね。これは、こんな風にカスタマイズ出来ますというような例になります。デフォルトのカラーはブラックなので気にせず進めていきましょう。

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

 

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

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

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

 

 

◆実習：アイコンを使ってみる

では、icon.htmlを作ってアイコンの表示を確認してみましょう。

使用しているアイコンは全て https://fontawesome.com/icons?d=gallery にあるFreeのアイコンです。

目的に沿ったアイコンを発見して使うのも大切ですから、完成図の通りになるようにアイコンを配置してみて下さい。

 

 

◎まとめ

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

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

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

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

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

レッスン