2018.06.07

22. 無料で使えるアイコン、Font Awesomeを使ってみよう

目次

Font Awesomeは、約1000種類のアイコンが無料で使えるサービスです。簡単なものから複雑なものまで、「こんなアイコンが使いたい」というイメージがあれば、たいていはそのイメージに合うアイコンが見つかります。

Font Awesomeの使い方

1. まずは公式サイトに行き、「Get Started」のページを開きます。下に少しスクロールすると下の画像のようなコード(<link rel・・・)があるので、これをそのままコピーしてHTMLファイルのheadタグの中に貼り付けます。

2. 「Icons」のページに移動し、使いたいアイコンを探します。ここで色が薄くなっているアイコンは有料プラン専用のアイコンなので、無料では使えません。無料のアイコンのみを表示するには、左のメニューの「Free」をクリックします。

3. アイコンの一覧画面で使いたいアイコンをクリックすると下の画像のようなページに移動するので、左下のコード(<i class・・・)全体をコピーします。

4. あとは、HTMLファイルの中の使いたい場所で、コピーしたコードを貼り付ければOKです。



アイコンのサイズを変える

アイコンのサイズを変えるには、コピーしたiタグの中に以下のクラスを追加します(クラス名同士はスペースで区切ってください)。

クラス名 元のサイズの何倍か
fa-xs 0.75倍
fa-sm 0.875倍
fa-lg 1.33倍
fa-〇x 〇の値は2~10の整数で指定でき、2だと2倍、3だと3倍。

また、もっと細かく指定したい場合は、上のクラス名と違った名前のclassやidを追加して、それにCSSでfont-sizeを指定しましょう。

アイコンの色を変える

アイコンの色については、サイズのようにFont Awesome独自のclassが用意されていないので、自分でclassやidを追加して、CSSのcolorプロパティで変えることになります。

アイコンに余白を付ける

iタグはインライン要素なので、左右のみ余白を付けることができます。アイコンと文字がくっついていると見にくいことがあるので、場合によってはアイコンの左右にpaddingを付けるといいでしょう。



まとめ

ここまでFont Awesomeの基本的な使い方を説明してきましたが、これ以外にもアイコンをいろいろ装飾できるので、気になった方は公式サイトのHow to Useを参考にしてみてください。

home

scroll