『FontAwesome』とは、アイコンを準備しているサイトです。
ここにあるアイコンは、free（無料）のものでも1,500個以上。
有料のものを含めると、7,500個以上のアイコンがあります。
そしてこれらのアイコンは、自身のサイトで自由に使うことができます。
更には『FontAwesome』を使うことで、３つのメリットがあります。
✅膨大な量でアイコンを探す手間が省ける
✅CSSで装飾することができる
✅ベクター方式なので解像度の心配がない
今回はこの『FontAwesome』を使って、アイコンを挿入する方法と調整方法を初心者向けに解説していきます。
アイコンを使うまでの流れ
アイコンを使う方法には、２つあります。
✅アイコンサイトからコードを取得して、アイコンを表示させる方法
✅画像ファイルをダウンロードして、アイコンを表示させる方法
今回はこのうちの、『アイコンサイトからコードを取得して、アイコンを表示させる方法』について解説していきます。
今回使用するアイコンサイトは冒頭にも解説しましたが、『FontAwesome』というサイトになります。
そしてこの『FontAwesome』からコードを取得して、アイコンを表示させる今回の流れは以下の通りとなります。
１．HTMLへアイコンを読み込む為のコードを記述する
２．HTMLアイコンをブラウザへアウトプットする為のコードを記述する
３．CSSを使ってアイコンを装飾する
FontAwesomeの使い方
FontAwesomeのログイン設定
早速アイコンを使う事を解説していきたいのですが、『FontAwesome』ではログインをしてコードを取得しなければなりません。
そこで、まずは『FontAwesome』のログイン設定をしていきましょう。
『FontAwesome』へアクセスしましょう。
次に『Start for Free』をクリックします。
そして自分のメールアドレスを入力して、『Send Kit Code </>』をクリックします。
『Resend confirmation Email』をクリックします。
しばらくすると、先程のメールアドレスに以下の内容のメールが届きます。
自分のメールアドレス認証の為、このメール内の『Click to Confirm Your Email Address + Set Things Up』をクリックします。
次にパスワードの設定を行います。
名前と苗字を入力して『All set. Let’s go!』をクリック
ここで発行されたコードが表示されます
HTMLへアイコンを読み込む為のコードを記述する
それでは、HTMLファイルにアイコンを読み込む為のコードを記述してみましょう。
『FontAwesome』から発行されたコードを、HTMLファイルの<head>要素内に貼り付けます。
もちろん、ブラウザ上には、まだ何も変化は見られません。
『アイコンを読み込む為の準備ができた』という認識でいいと思います。
HTMLアイコンをブラウザへアウトプットする為のコードを記述する
『FontAwesome』のトップページに戻ります。
そして『Icons』をクリックします。
次に使いたいアイコンをクリックします。
そしてサイト上部にあるコードをクリックして、コードをコピーします。
先程コピーしたコードをHTMLの<body>要素内に記述します。
HTMLコード
<body> <i class="fas fa-address-book"></i> </body>
それでは無事にブラウザへアイコンが表示されるか確認をしてみましょう。
ブラウザ表示
少し小さいと思いますが、無事にブラウザへ表示することができました。
次からは、このアイコンの大きさや色を変える方法を解説していきます。
CSSでアイコンを装飾する方法
『Font Awesome』で扱われるアイコンは、フォントアイコンとも呼ばれます。
画像ファイルとは違い、フォントと同様方法でCSSを使って装飾することが可能です。
アイコンにオリジナルのクラス名を与える
実はコピーしたコードには、簡単にクラス名を与えることができます。
サイトからコピーしたコードには、既に『fas fa-address-book』というクラス名が与えられています。
コピーしたHTMLコード
<i class="fas fa-address-book"></i>
ここに半角スペースを入れて、任意の名前を付与します。
ここでは『iconA』としておきます。
オリジナルのクラス名を付与したコード
<i class="fas fa-address-book iconA”></i>
これで、アイコンにオリジナルのクラス名の付与は完了です。
CSSでアイコンの大きさを変える
『Font Awesome』で扱われるアイコンは、フォントして装飾することが可能です。
なので、CSSのfont-sizeプロパティを使う事で、大きさを簡単に変えることが可能です。
先程付与したオリジナルのクラス名に、font-sizeプロパティを使って40pxに大きさを変えてみましょう。
CSSコード
.iconA{
font-size: 40px;
}
ブラウザ表示
CSSでアイコンの色を変える
次はCSSを使って、アイコンの色を変えてみましょう。
先程同様に、フォントの色を変える時と同じ方法を使います。
フォントの色を変えるには、colorプロパティを使用します。
CSSコード
.iconA{
font-size: 40px;
color: #00ff00;
}
ブラウザ表示
アイコンをHTMLのリストタグに反映する
更に少し応用を解説しておきます。
アイコンというと、リストタグに多く多様されます。
そこで、『Font Awesome』では参考ソースが準備されています。
サイト上部にある『Docs』をクリックしましょう。
次に右のサイドバーにある、『Icons in a List』をクリックします。
するとリストのブラウザ表示例と、ソースコードが現れます。
このソースコードをコピーするために、ソースコード右下のコピーアイコンをクリックします。
そしてHTMLファイルにコピーしたコードを、<body>要素内に上書きしてみましょう。
HTMLコード
<body> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li> </ul> </body>
ブラウザ表示
ここから自分なりのリストに、カスタマイズしていきます。
まずは一番上のリストのテキストを、『アドレス帳』に変えてみましょう。
HTMLコード
<body> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>アドレス帳</li> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li> </ul> </body>
ブラウザ表示
そして次に、アイコンを変えていきましょう。
アドレス帳に合うアイコンを探します。
『FontAwesome』のトップページに戻り、『Icons』をクリックします。
アドレス帳に合ったアイコンを探して、クリックします。
そしてアイコンのコードをクリックして、コードのコピーをします。
最後に先程のHTMLソースに、アイコンのソースを貼り付けます。
HTMLコード
<body> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-address-book"></i></span>アドレス帳</li> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li> </ul> </body>
ブラウザ表示
うまくアイコンが変わったと思います。
あとはCSSを使ってアイコンの大きさや、色を変えて調整していくわけです。
まとめ
いかがだったでしょうか。
この様に『Font Awesome』を使うことで、簡単にウェブサイトへアイコンを反映することができます。
リストだけではなく、コンテンツなどでもアイコンは幅広く活用できます。
是非このサイトを利用して、ウェブサイトのデザインの幅を広げてみてはどうでしょうか。
