スポンサーリンク

Webアイコン(FontAwesome)を使ってみよう!

2018年9月14日ブログ

  • 2020年5月6日
    『CSS(擬似要素)で指定する』に「SVGで表示している場合」を追記と書き換えをしました。
  • 2019年10月27日
    『FontAwesomeを使うたmrの準備』コードの取得方法がか変更されているので書き換えました。

アイコンフォントはアイコンを文字として使えるようしたツールです。アイコンフォントを提供しているサービスはいくつかありますが、その中で最も使われている「Font Awesome(フォント オーサム)」を使ってみることにしました。

今回の記事では「Font Awesomeの導入方法や使い方」などを紹介したいと思います。

スポンサーリンク

FontAwesomeを使うための準備

結耶
結耶

Font Awesomeのアイコン表示には「Webフォント」として表示する方法と「SVG」で表示する方法とありますが、「Webフォント」の方が扱いやすいと思うので当サイトでは主に「Webフォント」での使い方などを紹介します。

導入方法

2019年10月27日

導入するためのコードの取得方法が変更されているため書き直ししました。

FontAwesomeを利用するためには『読み込みコード』をサイトに挿入する必要があります。
現在コードの取得には「アカウント登録」が必要となっています。(2019年10月)
読み込みコードの取得方法は以下を参考にしてください。

テーマ『Luxeritas』をお使いの場合

WordPressテーマ『Luxeritas(ルクセリタス)』をお使いの方は導入方法が違いますのでこちらの記事を参考にしてください。(使い方は同じです。)

FontAwesomeの使い方

FontAwesome 公式

では実際にWebアイコンをページ(記事)内で使ってみましょう。

1 FontAwesomeのページに移動してください。

2 FontAwesomeのページ上部の『Icon』をクリック。

スマホの場合
左上の⇒『Icon』をクリックしてください。
※検索は英語でしてください。

3 アイコンの一覧が表示されるので使いたいアイコンをクリック。

検索して探す場合
一覧の上に検索枠があり、アイコンを検索して探すことができます。アイコンを検索する場合は英語で検索してください。

4 アイコンのページが表示されますので、アイコン名の下の中央あたりにあるアイコンのコードをコピーしてください。

5 アイコンのコードをコピーしたら、記事の使いたい箇所にコピーしたコードを挿入してください。

サンプル

<i class="fas fa-anchor"></i>

※上記では〈i〉タグを使用していますが、divやspanタグでも使えます。
div、spanタグにclass="アイコンコード"を入れてください。

<div class="fas fa-anchor"></div>
スポンサーリンク

色や大きさ、動きを変える

WebアイコンはCSSを使用して文字と同じように色を変えたり、大きさを変えたりすることができます。

またFontAwesomeにはアイコンの大きさを変えたり、動きをつけたりできる『クラス』があります。
※複数のクラス(class)指定は半角スペースで区切ります。

色を変える

色を変えるには文字と同じようにCSSで変恋します。

<i class="fas fa-exclamation-circle ico-red"></i>
.ico-red{
  color:#ff000;
}

※色を指定するクラス名はご自分でわかりやいものをお使いください。

アイコンの幅を揃える

指定しない場合のサンプル
HOME
CARET
BOOK

アイコンの幅を揃えるためにはfa-fwというクラスを追加します。

<i class="fas fa-exclamation-circle fa-fw"></i>指定した場合のサンプル
<i class="fas fa-home fa-fw"></i>HOME
<i class="fas fa-caret-right fa-fw"></i>CARET
<i class="fas fa-book fa-fw"></i>BOOK

指定した場合のサンプル
HOME
CARET
BOOK

大きさを変える

(左からxs、sm、lg、2倍、3倍、4倍)

fa-サイズを入れると大きさを変えることができます。
サイズの指定:xs / sm / lg / 数値x

<i class="fas fa-exclamation-circle fa-xs"></i>
<i class="fas fa-exclamation-circle fa-sm"></i>
<i class="fas fa-exclamation-circle fa-lg"></i>
<i class="fas fa-exclamation-circle fa-2x"></i>
<i class="fas fa-exclamation-circle fa-3x"></i>
<i class="fas fa-exclamation-circle fa-4x"></i>

CSSのfont-sizeでも大きさを変えることができます。

回転

fa-spinを使うとアイコンを回転させることができます。

わかりやすく大きさを3倍にして回転させています。

<i class="fas fa-sync fa-3x fa-spin"></i>

重ねる

これは の2つのアイコンを重ねています。

fa-stackを使うと2つのアイコンを重ねることができます。

<span class="fa-stack">
  <--!下になるアイコン 2倍で指定-->
    <i class="far fa-circle fa-stack-2x"></i>
  <--!上になるアイコン 1倍で指定-->
    <i class="far fa-file-alt fa-stack-1x"></i>
</span>
Point
  • fa-stackで囲み(サンプルはspan使用)、下になるアイコンをfa-stack-2x(2倍)で最初に指定、上になるアイコン をfa-stack-1x(1倍)であとにと指定します。
  • わかりやすくコードを改行してありますが、span、iタグは繋げてください。 改行が入っていると重なりません。

応用編

組み合わせて使えばいろいろできます。以下はほんの一部の応用編です。参考程度に。

サンプル1


2つのアイコンを重ねて色を赤に変更しています。

<span class="fa-stack" style="color:red;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="far fa-file-alt fa-stack-1x"></i>
</span>

サンプル2


2つのアイコンを重ねて色を青に変更、「fa-lg」でアイコンを大きくしています。

<span class="fa-stack fa-lg" style="color:blue;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="far fa-file-alt fa-stack-1x"></i>
</span>

サンプル3


サンプル2に「fa-spin」を加えて中のアイコンを回転しています。

<span class="fa-stack fa-lg" style="color:blue;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="far fa-file-alt fa-stack-1x fa-spin"></i>
</span>

サンプル4

使用アイコン   (2倍・赤)・ (1倍・白)

<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x" style="color:red;"></i>
  <i class="far fa-file-alt fa-stack-1x" style="color:white;"></i>
</span>

Webアイコンと数字を組み合わせる

Webアイコンと数字を組み合わせて、 で囲んだ数字もできます。

丸で囲んだ数字

2

<span class="fa-stack fa-xs" style="color:#dd143c;">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-inverse fa-stack-1x">2</i>
</span>

四角で囲んだ数字

3

<span class="fa-stack fa-xs" style=" color: #dd143c;">
  <i class="fas fa-square fa-stack-2x">
  </i><i class="fa fa-inverse fa-stack-1x">3</i>
</span>

2020年5月6日 書き換え

CSS(擬似要素)で指定する

CSS(擬似要素)でアイコンを指定する場合は以下のように記述します。

CSS
.icon-sample:before {
    font-family:"Font Awesome 5 Free";
    content:"\アイコンのコード";
    font-weight:900または400;
}
font-family

「font-family」は以下のように指定してください。

無料font-family:"Font Awesome 5 Free";
または
ブランドfont-family:"Font Awesome 5 Brands";

「ブランド」はAmazonやTwitter、Facebookなどのブランドアイコンを擬似要素で指定する場合に使用します。

content

「content」は各アイコンのコードを記述します。アイコンのコードはアイコンのページのアイコン名の下あたりにあります。

font-weight

「font-weight」はアイコンの種類を指定します。
アイコンの種類は「レギュラー」「ソリッド」「ブランド」「プロ」と分けられています。

レギュラー400
ソリッド900
ブランド400

※「レギュラー」「ブランド」の場合はfont-weightは省略可能です。
アイコンの種類はアイコンページの上部にあります。

関連記事

※擬似要素についてはこちら

SVG表示している場合

上記では「Webフォント」表示での使い方を主に紹介していますが、「SVG」表示している場合、CSS(擬似要素)の指定にはもうひと手間加える必要があります。

SVG表示の場合display:none;を追加する
CSS
.icon-sample:before {
    display:none;
    font-family:"Font Awesome 5 Free";
    content:"\アイコンのコード";
    font-weight:900または400;
}

SVG表示している場合、「font-family」「content」「font-weight」の他に「display:none;」を追加する必要があります。

2019年10月26日 書き換え

旧バージョンのFontAwesomeを使うには?

上は最新バージョンのFontAwesome5です。
バージョン5はアイコンやクラス名、font-weightの指定が必要になったりと一新されています。

バージョン5は旧バージョンじ比べちょっと使いづらくなり、「前のバージョンのがよかった」という人も少なくありません。

FontAwesomeの旧バージョンは今でも使えますが、開発はされておらず、新しいアイコンが追加されることはありません。
またバージョン5に一新したことにより旧バージョンの提供を辞めてしまうかもしれません。

きらり
きらり

じゃあ、バージョン5にしないとダメなの?

結耶
結耶

ふふふっ。見つけました!旧バージョンのアイコンが使えてしかも新しいアイコンを開発されているところが!

ForkAwesome(fフォーク オーサム)

ForkAwesome 公式

ForkAwesomeは、製作者がFontAwesomeのバージョン5の方向性に疑問を持ち、FontAwesomeから分かれForkAwesomeを立ち上げたプロジェクトです。

そのため、FontAwesomeの旧バージョンのアイコンを読み込みコードを変更すれば使え、CSSの指定もfont-familywo変更すれば旧バージョンと同じように使えます。
さらに新しいアイコンも追加されています。

ForkAwesomeの使い方やいこうの方法など詳しくは以下のサイトで詳しく説明されていますので参考にしてみてください。

きらり
きらり

結耶もこっちに変えるの?

結耶
結耶

私もどちらかというと旧バージョンのがいいんだよね~。悩むわぁ(^^;w

FontAwesomeの旧バージョンを使いたいという方はForkAwesomeを使ってみてください。

最後に

WordPressにはWebアイコンを簡単に使えるプラグインがありますが、この方法の方がいろいろなことに使えると思います。

Webアイコンを使うとわかりづらいリンクや見出しがわかりやすくなったりします。
文字だけより読んできれる人の目を引きますし、読んでくれるユーザーも読みやすくなると思います。

ぜひ使ってみてください。

こちらの記事も参考にどうぞ!

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら

 

この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。