MENU

【最新版】Font Awesome(Webアイコンフォント)の使い方をブロガー向けに解説

目次

1.Font Awesomeとは

fontawesomeホームページ

●Font Awesomeとは

Font Awesomeは簡単に言うと、自身のブログにWebアイコンフォントを表示させてくれるサービスです。

英語なのでGoogle翻訳を使用しても良いですね。アイコン一覧なども確認できます。

●Webアイコンフォントとは

ウェブページ上で文字と同じように表示できるアイコンのことです。

画像でアイコンを貼るのと違う点
  • 容量が軽い
  • 拡大してもぼやけない
  • 色もサイズも簡単に変更可能

Webアイコンフォントってこんな奴です

⬇️

Font Awesome5って?

2017年末にリリースされたFontAwesomeの最新バージョンです。

FontAwesome5には、無料プランと、有料プランがあります。

最初のうちは無料で問題ないかと思います。

2.Font Awesomeを使用する前の基礎知識

Font Awesomeの使用方法

Font Awesomeを使用するには3通りあります。

  1. サーバーにデータをアップデート
  2. CDNを使う
  3. アカウント登録⬅︎これを使用

今回は1のサーバーにデータをアップデートの説明は割愛します。(簡単なやり方で説明します)

今までは2のCDNが採用されてました。このやり方は個人的には楽だったのですが、最近以下の理由で3のアカウント登録になりました

  • バージョン管理の自動化
  • アイコンの表示を高速化

バージョン管理の自動化はかなりありがたい。

今まで、新アイコンが追加されたときにはv○.○.○の部分を最新のバージョン番号に書き換えないと新アイコンは使えませんでした。つまり手間がかかってたんです。

その手間が必要なくなったと言うことです。(細かい話なのでわからなければ、楽になったと言う理解でOKです。)

アイコンの表示を高速化は個々のアカウント別にURLを作るので、速度表示が早くなると言う理解で十分かと思います。

Font Awesomeは文字扱いなのでそもそも表示速度は早かったのですが、より早くなったと言うことですね。

CDNとは

CDNとは「専用のサーバー上にある画像やフォントなどのデータ」を読み込んで自分のWebサイトに表示させる仕組みです。

少し噛み砕くと

  • アイコンをダウンロードしなくて良い。
  • 自身のブログにアップロードする必要ない。
  • 上記2つの作業なしで使用できる。

現在のアカウント登録のやり方でもCDNは活用されています。

まとめると、現在のアカウント登録のやり方でのメリットは以下のようになります。

  • バージョン管理の自動化(いちいち手動でアップデートしなくて良い)
  • アイコンの表示を高速化
  • アイコンをダウンロードしなくて良い。
  • 自身のブログにアップロードする必要ない。

3.Font Awesomeの使用手順

STEP
アカウント登録
まずは公式ページで上記ボタンをクリック
このページでメールアドレスを入力し、右ボタンをクリック。
入力したメールアドレスにこのような本文が届くので、下記をクリック
パスワードを入力したらアカウント作成完了
STEP
head内にファイルを読み込む
右上のアカウントマークをクリックし「Kits」をクリック

無料であれば1つのキットが作れます。

右上のキットコードをコピーします。

そして、コピーしたコードをブログの<head>〜</head>の中に貼り付けます。基本的に</head>の直前に貼ればOKです。

headタグを編集する場所は?

  • WordPress:[ダッシュボード]⇒[外観]⇒[テーマエディター]⇒右側のバーの[header.php]
  • はてなブログ:[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内にコードを貼付け
  • Livedoorブログ:[ブログ設定]→[PC]→[カスタマイズ]→[HTMLファイル]
  • FC2ブログ:[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]
  • Blogger:[テンプレート]⇒[HTMLの編集]
STEP
Font Awesomeのコードを取得

ここまで準備できたらあとは簡単です。

検索し、使いたいフォントを選択
右下を選択
右上のボタンでコードをコピー
STEP
使用したい場所にコードを貼り付ける
<p>こんな感じで表示される→<i class="fas fa-blog"></i></p>

こんな感じで表示される→

4.Font Awesomeのデザインの変更

サイズ変更

<p>こんな感じ→<i class="fas fa-blog fa-2x"></i></p>

半角でスペースを入れてください。

もしわからなければこのコードをコピペでも良いです。

こんな感じ→

fa-2xの部分に他のコードも置き換えられます。

アイコンのサイズ変更
  • fa-lg (1.333…倍)
  • fa-2x (2倍)
  • fa-3x (3倍)
  • fa-4x (4倍)
  • fa-5x (5倍)

色変更

【HTML】<p>こんな感じ→<i class="fas fa-blog mycolor1"></i></p>
【CSS】 .mycolor1 {color: skyblue;}
(【】内は記述しない)

HTMLとCSS両方いじるので少し難しいかもなので、もうワンパターン書いておきます。

<p>こんな感じ→<i class="fas fa-blog" style="color: skyblue;"></i></p>

一応紹介しましたが、後者の簡単な方はデザインの優先順位が上に位置してしまう書き方なので、できれば前者で書いた方が後々バグなどが起きないと思うので、オススメは前者のやり方です。

こんな感じ→

5.他にもできることはある

デザインについては他にもできることが多々あります。

とはいえ、初心者はこの記事で触れた程度で十分だと思います。

なぜなら、最初のうちにたくさんのことを網羅してしまうと挫折の要因になると考えるからです。

デザインのことは他は有料のワードプレステーマに任せちゃおう。

本サイトはSWELLというテーマを使っています。

テーマならSWELL(デザインもSEOも)

Wordpressテーマで悩んでいるなら、SWELLをオススメします。

SWELLを使用することで作業効率も上がり、デザインが綺麗な仕上がりに

私はブログ開始2ヶ月目で無料テーマからこのテーマに移行しました。

このテーマについて知るだけでも価値がありますよ。

SWELLの公式ページで詳細を確認する(お試し版あり)

この記事が気に入ったら
フォローしてね!

この記事を書いた人

●就活、転職、自営業経験者として働き方について発信中。暮らしについても。「一人一人が生き方をデザインできるように」を第一にサイト運営しています。
【経歴】証券会社▶自営業▶︎保育士

目次
閉じる