【Font Awesome】初心者でもすぐ使える！簡単Webアイコン入門

【Font Awesome】初心者でもすぐ使える！簡単Webアイコン入門

この記事ではSNSや動物、絵文字に記号など、様々なアイコンを表示できる「Font Awesome」についてご紹介します。

「ブログの中でTwitterのアイコンを表示させたい」

「文章の先頭にチェックマークがあれば読みやすくなるのに…」

このようにオリジナリティを求めている人には、ぜひオススメのWebサービスです。

この記事では、大きく以下3つに分けて解説します。

  • Font Awesomeの概要と準備
  • Font Awesomeの設定集9選
  • CSSへの書き方

ブログやホームページ作りなど、Web制作の様々なシーンで使えるのでぜひ試してみてください。

目次
  1. Font Awesomeとは？
  2. Font Awesomeの準備
  3. 1.CDNの準備
  4. 2.Font Awesomeの使い方
  5. Font Awesomeの設定集9選
  6. 1.サイズ変更
  7. 2.色の変更
  8. 3.アイコンと文字の間に幅を作る
  9. 4.線で囲む
  10. 5.角度の変更
  11. 6.反転
  12. 7.回転するアニメーションを付ける
  13. 8.アイコンにアイコンを重ねる
  14. 9.アイコンをfloatさせる
  15. Font AwesomeをCSSに書く
  16. もっと色んなアニメーションを付けたい
  17. まとめ

Font Awesomeとは？

image

Font Awesome(フォント・オウサム)とは「Webアイコンフォント」とも呼ばれ、Webサイトでアイコンを表示させるWebサービスです。


img要素を読み込まなくても、Font Awesomeだけで簡単にアイコンを表示させられます。

またアイコンを表示させるだけでなく、サイズや色、角度やアニメーションの変更など、細かい設定も思いのまま。

有料のProプランもありますが、ほとんどの機能が無料で使えるので、ブログやWeb制作では必須のサービスです。


Font Awesomeの準備

Font Awesomeの使い方にはCDNとダウンロードがありますが、本記事では以下の理由からCDNをご紹介します。

  • サーバーへの負荷が少ない
  • Font Awesomeがアップデートしても、ダウンロードし直す必要がない
  • タグをHTMLにコピペするだけですぐ使える

世界中にある複数のサーバにWebコンテンツを配置して、1つのサーバあたりの負荷を分散させる仕組みがCDNです。

特に意味を理解していなくても使えますので、覚えなくても問題ありません。

1.CDNの準備

ではさっそくCDNの使い方を見ていきましょう。

準備自体は簡単で、以下のどちらかをHTMLの<head>〜</head>内にコピペするだけです。

[Webフォント]

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
※横にスクロールできます。

[SVG画像形式]

<script defer src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
※横にスクロールできます。

通常は最初にご紹介した[Webフォント]で問題ありませんが、SVG画像形式でアイコンを表示させたい場合は[SVG画像形式]のタグを使ってください。

またコードの途中にある「v5.15.1」は、現在のバージョンを表しています。

もしバージョンアップさせたい場合は、Font Awesome公式ページのTopに現在のバージョンが記載されているので、数値を書き換えるだけでOKです。

image


2.Font Awesomeの使い方

Font Awesomeで好きなアイコンを探して、Webページに表示させるまでの手順をご紹介します。

手順1.Font AwesomeのTopページにアクセス

Font Awesome

image


手順2.ヘッダーにある「Icons」か、検索スペースを利用して好みのアイコンを決める

image

image


手順3.アイコンのコードをコピー

image

※マウスポインタを<i>タグの部分に重ねて左クリックするだけで、自動でコピーしてくれます。


手順4.HTML内の好きな位置にペースト

image

image


【補足】Font Awesomeで元から用意されてるクラスを使えば、CSSを使わなくても設定を変更することができます。

image

image


Font Awesomeの設定集9選

image

アイコンを表示させるだけでも非常に便利ですが、どうせなら細かく見た目を設定したいですよね。

そこでここからは、カンタンにできるFont Awesomeの設定方法を9つご紹介します。

1.サイズ変更

「fa-サイズ」クラスで、アイコンサイズを細かく変更できます。 クラスには以下のような種類があります。

fa-xs（0.75倍）
fa-sm（0.875倍)
fa-lg (約1.33倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)
・
・
・
fa-10x（10倍）


具体例


HTML
  • <i class="fas fa-piggy-bank fa-xs"></i>
  • <i class="fas fa-piggy-bank"></i>
  • <i class="fas fa-piggy-bank fa-lg"></i>
  • <i class="fas fa-piggy-bank fa-6x"></i>

    • また、ピクセル単位などで設定したい場合は、CSSでfont-sizeプロパティを使うこともできるので、試してみてください。


    2.色の変更

    色の変更はstyle属性か、CSSで設定します。

    【Style属性】

    <i style="color:red" class="fas fa-piggy-bank"></i>

    【HTML&CSS】

    [HTML]
<i class="fas fa-piggy-bank"></i>

[CSS]
.fa-piggy-bank {
color: blue;
}


    具体例



    3.アイコンと文字の間に幅を作る

    「fa-fw」クラスで、アイコンと文字の間にちょうど良いスペースを作れます。


    具体例


    HTML [fa-fwなし]
  • <i class="fas fa-piggy-bank"></i>Pig
  • <i class="fas fa-ambulance"></i>Car
  • <i class="fas fa-hotdog"></i>Hotdog

    • [fa-fwあり]
  • <i class="fas fa-piggy-bank fa-fw"></i>Pig
  • <i class="fas fa-ambulance fa-fw"></i>Car
  • <i class="fas fa-hotdog fa-fw"></i>Hotdog
    • Pig
    Car
    Hotdog

    Pig
    Car
    Hotdog

    文字の並びに注目してみてください。

    一見すると違いが分かりにくいですが、ちゃんと幅が揃っているのが分かると思います。

    もしアイコンと文字の幅が揃っていないと感じたら、ぜひ試してみてください。


    4.線で囲む

    「fa-border」クラスで、アイコンの周囲を線で囲むことができます。


    具体例


    HTML
  • <i class="fas fa-piggy-bank fa-border"></i>
  • <i class="fas fa-piggy-bank"></i>


    • 5.角度の変更

    「fa-rotate-数値」クラスで、表示角度を変えられます。 クラスには以下の種類があります。

    fa-rotate-90
fa-rotate-180
fa-rotate-270


    具体例


    HTML
  • <i class="fas fa-piggy-bank"></i>
  • <i class="fas fa-piggy-bank fa-rotate-90"></i>
  • <i class="fas fa-piggy-bank fa-rotate-180"></i>
  • <i class="fas fa-piggy-bank fa-rotate-270"></i>


    • 6.反転

    「fa-flip-horizontal」クラスで水平方向、「fa-flip-vertical」クラスで垂直方向に反転させられます。


    具体例


    HTML
  • <i class="fas fa-piggy-bank"></i>
  • <i class="fas fa-piggy-bank fa-flip-horizontal"></i>
  • <i class="fas fa-piggy-bank fa-flip-vertical"></i>


    • 7.回転するアニメーションを付ける

    「fa-spin」クラス、「fa-pulse」クラスでアイコンを回転させられます。


    具体例


    HTML
  • <i class="fas fa-cog fa-spin"></i>
  • <i class="fas fa-spinner fa-pulse"></i>

    • 上の例では、Spinnersというカテゴリのアイコンを使っています。 fa-spin、fa-pulseと相性が良いので、ぜひ試してみてください。


    8.アイコンにアイコンを重ねる

    「fa-stack」クラスで、Font Awesome同士を重ね合わせることができます。

    <span class="fa-stack">
  <i class="アイコンクラス名　　fa-stack-2x"></i>
  <i class="アイコンクラス名　　fa-stack-1x"></i>
</span>


    具体例


    HTML
  • <span class="fa-stack">
  •  <i class="fas fa-square fa-stack-2x"></i>
  •  <i class="fas fa-piggy-bank fa-stack-1x"></i>
  • </span>

    • コードを書くときは、以下のポイントに注意してください。

    • <span>タグの中に、重ねたい2つのアイコンのタグを入れる
    • 先に背面のタグを書き、fa-stack-2xクラスを指定する
    • 次に前面のタグを書き、fa-stack-1xクラスを指定する
    • サイズを変更するクラスは、<span>タグの中に書く


    9.アイコンをfloatさせる

    「fa-pull-left」クラス、「fa-pull-right」クラスで、アイコンにfloat属性を付けられます。

    以下のようにアイコンに対して、文章を回りこませたいときに便利です。


    具体例


    HTML
  • [fa-pull-leftなし]
  • <i class="fas fa-quote-left"></i>
  • <p>CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。</p>

  • [fa-pull-leftあり]
  • <i class="fas fa-quote-left fa-pull-left"></i>
  • <p>CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。</p>

    • CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。


    CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。


    Font AwesomeをCSSに書く

    ここからはCSS側でFont Awesomeを使う方法について見ていきましょう。

    以下のように、CSS側で:beforeや:afterを使って表示させることもできます。

    [HTML]
<span class="クラス名"></span>

[CSS]
クラス名:before(or :after) {
font-family: "Font Awesome 5 Free";
content: '\ユニコード';
font-weight: 数値;
}


    具体例


    HTML
  • <p class="pig">Pig</p>
    • CSS
  • .pig:before {
  •  font-family: "Font Awesome 5 Free";
  •  content: '\f4d3';
  •  font-weight: 900;
  • }
    • Pig


    基本的に上記した書式を真似てもらえれば問題ありませんが、初めて見る人にとっては難しいですよね。

    そこで、以下にポイントをまとめてみました。

    タグ

    • 基本的に好きなタグに対して使える
    • 好きなクラス名を付けてOK

    content

    • ユニコードの前にはバックスラッシュ「\」が必要

    font-family

    • Free(無料版)のアイコンを使う場合 Font Awesome 5 Free
    • Pro(有料版)のアイコンを使う場合 Font Awesome 5 Pro

    font-weight

    ※アイコンの種類ごとにfont-weightを設定する。

    • SOLID(fas) font-weight：900
    • REGULAR(far) font-weight：400
    • LIGHT(fal) font-weight：300
    • BRANDS(fab) font-weight：400

    またユニコードとアイコンの種類ですが、Font Awesomeのアイコンページでは、以下の部分に表示されています。

    image


    もっと色んなアニメーションを付けたい

    Font Awesome Animationを使うと、さらに多くのアニメーションをつけられます。

    こちらもCDNとダウンロード版がありますが、本記事ではCDNをご紹介します。

    手順1.記事冒頭の【CDNの準備】でご紹介したlinkタグの他に、以下のタグを<head>〜</head>内にコピペ。

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css" type="text/css" media="all"/>
※横にスクロールできます。


    手順2.HTMLに記述するクラスを、以下サイトのUsageのOn DOM Loadからコピペ。

    Font Awesome Animation

    image


    具体例


    HTML
  • <i class="fas fa-piggy-bank"></i>
  • <i class="fas fa-piggy-bank faa-wrench animated"></i>
  • <i class="fas fa-piggy-bank faa-flash animated"></i>


    • ＼一流デザイナーのスキルが身に付く／

    無料カウンセリングはこちら

    まとめ

    この記事では、以下を中心にFont Awesomeについて解説しました。

    • Font Awesomeの概要と準備
    • Font Awesomeの設定集9選
    • CSSへの書き方

    アイコンがすこし加わるだけで、他のWebサイトとは分かりやすく差別化できます。

    ブログやWebサイトなどで、ぜひ個性的なページ作りに役立ててみてください。

    関連記事

    佐藤恭平
    この記事を書いた人
    佐藤恭平

    人気記事

    1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
      【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
      プログラミング学習
      プログラミングスクール・サービス
    2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
      塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
      受講生インタビュー
    3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
      様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
      講師インタビュー
    4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
      【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
      Python
      プログラミング書籍・参考書
    5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
      【PHP入門徹底ガイド】初心者のための学習ロードマップ
      PHP
      プログラミング入門
    6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
      コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
      Python
      HTML
      CSS
      お役立ち情報
      アプリ学習入門
    7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
      【Twitter×Python】自分専用のエゴサーチボットを作る方法
      Python
    8. Webデザインから見たSEO
      Webデザインから見たSEO
      Webデザイン入門
      Webデザインお役立ち情報
    9. 未経験からのWebデザイナー転職を有利にする資格４選
      未経験からのWebデザイナー転職を有利にする資格４選
      Webデザインお役立ち情報
      転職
    まずは7日間お試し！人気プログラミング講座を無料公開中
    オンライン・プログラミングレッスンNo.1のCodeCamp
    プログラミング講座を無料で試す