この記事ではSNSや動物、絵文字に記号など、様々なアイコンを表示できる「Font Awesome」についてご紹介します。
「ブログの中でTwitterのアイコンを表示させたい」
「文章の先頭にチェックマークがあれば読みやすくなるのに…」
このようにオリジナリティを求めている人には、ぜひオススメのWebサービスです。
この記事では、大きく以下3つに分けて解説します。
ブログやホームページ作りなど、Web制作の様々なシーンで使えるのでぜひ試してみてください。
Font Awesome(フォント・オウサム)とは「Webアイコンフォント」とも呼ばれ、Webサイトでアイコンを表示させるWebサービスです。
img要素を読み込まなくても、Font Awesomeだけで簡単にアイコンを表示させられます。
またアイコンを表示させるだけでなく、サイズや色、角度やアニメーションの変更など、細かい設定も思いのまま。
有料のProプランもありますが、ほとんどの機能が無料で使えるので、ブログやWeb制作では必須のサービスです。
Font Awesomeの使い方にはCDNとダウンロードがありますが、本記事では以下の理由からCDNをご紹介します。
世界中にある複数のサーバにWebコンテンツを配置して、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です。
Font Awesomeで好きなアイコンを探して、Webページに表示させるまでの手順をご紹介します。
手順1.Font AwesomeのTopページにアクセス
手順2.ヘッダーにある「Icons」か、検索スペースを利用して好みのアイコンを決める
手順3.アイコンのコードをコピー
※マウスポインタを<i>タグの部分に重ねて左クリックするだけで、自動でコピーしてくれます。
手順4.HTML内の好きな位置にペースト
【補足】Font Awesomeで元から用意されてるクラスを使えば、CSSを使わなくても設定を変更することができます。
アイコンを表示させるだけでも非常に便利ですが、どうせなら細かく見た目を設定したいですよね。
そこでここからは、カンタンにできるFont Awesomeの設定方法を9つご紹介します。
「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倍）
具体例
また、ピクセル単位などで設定したい場合は、CSSでfont-sizeプロパティを使うこともできるので、試してみてください。
色の変更は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;
}
具体例
「fa-fw」クラスで、アイコンと文字の間にちょうど良いスペースを作れます。
具体例
文字の並びに注目してみてください。
一見すると違いが分かりにくいですが、ちゃんと幅が揃っているのが分かると思います。
もしアイコンと文字の幅が揃っていないと感じたら、ぜひ試してみてください。
「fa-border」クラスで、アイコンの周囲を線で囲むことができます。
具体例
「fa-rotate-数値」クラスで、表示角度を変えられます。 クラスには以下の種類があります。
fa-rotate-90
fa-rotate-180
fa-rotate-270
具体例
「fa-flip-horizontal」クラスで水平方向、「fa-flip-vertical」クラスで垂直方向に反転させられます。
具体例
「fa-spin」クラス、「fa-pulse」クラスでアイコンを回転させられます。
具体例
上の例では、Spinnersというカテゴリのアイコンを使っています。 fa-spin、fa-pulseと相性が良いので、ぜひ試してみてください。
「fa-stack」クラスで、Font Awesome同士を重ね合わせることができます。
<span class="fa-stack">
<i class="アイコンクラス名 fa-stack-2x"></i>
<i class="アイコンクラス名 fa-stack-1x"></i>
</span>
具体例
コードを書くときは、以下のポイントに注意してください。
「fa-pull-left」クラス、「fa-pull-right」クラスで、アイコンにfloat属性を付けられます。
以下のようにアイコンに対して、文章を回りこませたいときに便利です。
具体例
CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。
CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。
ここからはCSS側でFont Awesomeを使う方法について見ていきましょう。
以下のように、CSS側で:beforeや:afterを使って表示させることもできます。
[HTML]
<span class="クラス名"></span>
[CSS]
クラス名:before(or :after) {
font-family: "Font Awesome 5 Free";
content: '\ユニコード';
font-weight: 数値;
}
具体例
基本的に上記した書式を真似てもらえれば問題ありませんが、初めて見る人にとっては難しいですよね。
そこで、以下にポイントをまとめてみました。
タグ
content
font-family
font-weight
※アイコンの種類ごとにfont-weightを設定する。
またユニコードとアイコンの種類ですが、Font Awesomeのアイコンページでは、以下の部分に表示されています。
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について解説しました。
アイコンがすこし加わるだけで、他のWebサイトとは分かりやすく差別化できます。
ブログやWebサイトなどで、ぜひ個性的なページ作りに役立ててみてください。
