WEB

Font Awesomeの使い方【バージョン5.0対応】

今回は、FontAwesomeの使い方について紹介します。

Font Awesomeとは

Webアイコンフォントが表示できるようになるサービスです。

公式サイトはこちらから

Font Awesome

Font Awesomeのバージョン履歴

  • 2018年7月24日 FontAwesome5.2
  • 2018年8月28日 FontAwesome5.3

Font Awesome5とは

FontAwesome5は、2017年末にリリースされたFontAwesomeの最新バージョンのことです。
バージョン5では、新たに約250個のアイコンやPROバージョンが追加されました。
PROバージョンでは、約1000個以上のアイコンが使えます。 バージョン4のCSSやアイコンも見直されて最適化がされています。

Font Awesome5の特徴

  • アイコンの追加(合計929個)
    Ver5.2 アイコンの追加により、1295個
  • 有料Proバージョンの追加(1387個)
    Ver5.2 アイコンの追加により、3652個
  • SvgとJavascriptによる描画方法の追加
  • アイコン、CSSの最適化
  • サイトデザインの変更
  • アイコン種類(SOLID・REGULAR・LIGHT・BRAND)に応じてfas、far、fal、fabに分類

LINEアイコンなどの会社ロゴのフォントも新しく追加されました。

Font Awesomeの使用方法

FontAwesomeを使うためには、まずアイコンフォントを読み込みを行います。
読み込みには、CNDとデータをアップロードする2つの方法があります。

CNDを使う方法

CNDには、JavaScriptとSVGによる描画、CSSとWEBフォントを使った2種類の方法があります。
バージョン5ではJavaScriptとSVGによる描画が推奨されています。
最新バージョンは、こちらからご確認ください。

【STEP1】コードをコピーする

こちらのコードをコピーします。

FontAwesome5.3【最新バージョン】

Web Fonts & CSSで使用する場合

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.3.1/css/all.css” integrity=”sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU” crossorigin=”anonymous”>

SVG & JavaScriptで使用する場合

<script defer src=”https://use.fontawesome.com/releases/v5.3.1/js/all.js” integrity=”sha384-kW+oWsYx3YpxvjtZjFXqazFpA7UP/MbiY4jvs+RWZo2+N94PFZ36T6TFkc9O3qoB” crossorigin=”anonymous”></script>

FontAwesome4.7【旧バージョン】

※FontAwesome4.7ではJavaScriptとSVGによる描画がないため、CSSとWEBフォントを使った方法になります。

Web Fonts & CSS

<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”>

【STEP2】headタグ内に貼付け

ブログやWEBサイトのheadタグ内にコード貼付けてください。

WordPress header.phpのheadタグ内にコード貼付け
FC2ブログ [設定テンプレートの設定 – ◯◯のHTML編集]のheadタグ内にコード貼付け
はてなブログ [設定 – 詳細設定 – headに要素を追加]にコードにコード貼付け

データをアップロードして使う方法

【STEP1】FontAwesomeをダウンロードする

こちらからFontAwesomeをダウンロードできます。

FontAwesome5.3【最新バージョン】

FontAwesome5.3 ダウンロード

FontAwesome4.7【旧バージョン】

FontAwesome4.7 ダウンロード

【STEP2】サーバーにアップロード

以下のファイルをサーバーにアップロードしてください。

css/ font-awesome.css
font/ font fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff fontawesome-webfont.woff2
FontAwesome.otf

【STEP3】スタイルシートの読み込み

font-awesome.cssの読み込みを行うためheadタグ内に次のコード貼付けてください。

<head>
<!– FontAwesomeの読み込み –>
<link href=”./font-awesome.css” rel=”stylesheet”>
</head>

FontAwesomeの使い方➀ HTMLコードで使う

htmlコードを貼付けて使う方法について説明します。
まず、FontAwesomeのアイコン一覧で使いたいアイコンを見つけてクリックします。

アイコンが薄いのは…
文字が薄くなっているのはProバージョンで使えるアイコンです。

アイコンの詳細画面には、サンプルがあるのでデザインを確認できます。

下にスクロールすると上のような画面が出てきます。
<i>タグの横にあるを押してコピーします。
コピーした<i>タグをHTMLファイルの表示させたい位置に貼付けます。

アイコンの命名が変わりました。
4.xシリーズからの変更の場合は、注意してください。

拡大・向き・回転などを変える方法

回転や拡大、縮小についてはバージョン4・5共に同じ方法です。

<i class=”fas fa-arrow-up fa-lg fa-rotate-90“></i>

<i>タグのclassにコードを追加して拡大・向き・回転を行います。

拡大

アイコンサイズを1.33em(fa-lg)から10em(fa-10x)まで拡大できます。

アイコン コード 説明
なし 拡大なし
fa-lg 拡大1.33倍(1.33em)
fa-2x 拡大2倍(2em)
fa-3x 拡大3倍(3em)
fa-4x 拡大4倍(4em)
fa-5x 拡大5倍(5em)

縮小

アイコンサイズ0.75em(fa-xs)と0.875em(fa-sm)に縮小できます。

アイコン コード 説明
なし 縮小なし
fa-xs 縮小0.75倍(.75em)
fa-sm 縮小0.875倍(.875em)

向き

アイコン コード 説明
なし 0度
fa-rotate-90 90度傾ける
fa-rotate-180 180度傾ける
fa-rotate-270 270度傾ける

回転

アイコン コード 説明
fa-spin 回転させる

反転

アイコン コード 説明
なし 反転なし
fa-flip-horizontal 水平方向に反転
fa-flip-vertical 垂直方向に反転

前後の隙間

アイコンと文字の間に隙間を作ることができます。

アイコン コード 説明
アイコン なし なし
アイコン fa-fw 前後に隙間を与える

FontAwesomeの使い方➁ CSSの疑似要素で使う

CSSの疑似要素(before/after)を使った方法について説明します。
文章中で使う場合は、以下のようなHTML、CSSコードを書きます。

【サンプル】
これはのアイコンです。

【HTMLコード】
これは<span class=”youtube”>YouTube</span>のアイコンです。

【CSSコード】
.youtube::before {
font-family: “Font Awesome 5 brands”;
font-weight: 900;
content: “\f007”;
}

“font-family”でWEBアイコンフォントの読み込み

Free/Pro/ブランドで読み込むfont-familyが違います。

【CSSコード】
/* 無料バージョンの場合 */
font-family: “Font Awesome 5 Free”;
/* Proバージョンの場合 */
font-family: “Font Awesome 5 Pro”;
/* ブランドアイコンの場合 */
font-family: “Font Awesome 5 Brands”;

“content”で読み込むアイコンを選ぶ

今回は、iタグではなく一番右にあるユニコードをコピーして、 CSSコードのcontent: 部分に貼付けます。

【CSSコード】
/* !マークアイコンの場合 */
content: “\f007”;
/* 鉛筆の場合 */
content: “\f303”;

“font-weight”でアイコンフォントのスタイルを選ぶ

無料版ではソリッドとブランド、一部のレギュラーを選ぶことができます。

【CSSコード】
/* ソリッドの場合 */
font-weight: 900;
/* レギュラー、ブランドの場合*/
font-weight: 400;
/* ライトの場合 */
font-weight: 300;

font-weightを指定しないと表示されません。
900(ソリッド)、400(レギュラーまたはブランド)、300(ライト)のいずれかを指定してください。

アイコン詳細画面の右側にSOLID、REGUAR、LIGHTがあり、 その下にProと書かれていないフォントウェイトを無料で使うことができます。

CSSでデザインを変える

【CSSコード】
/*左右の余白を変更*/
padding: 0 5px;
/*アイコンサイズを変更*/
font-size: 15px;
/*アイコン色を変更*/
color: white;

Proバージョンについて

Proバージョンは60ドル日本円で約6600円(1ドル110円の場合)で購入できます。

  • 1387個のすべてのアイコン(無料版929個)が使用できる
  • 3種類すべてのスタイル(SOLID・REGULAR・LIGHT)が使用できる

まとめ

今回のアップーデートでアイコンが増えてより使いやすくなりました。
無料バージョンでも十分使えるのでぜひ試してみてください。