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

2018年9月14日

  • 2019年10月27日
    『FontAwesomeを使うたmrの準備』コードの取得方法がか変更されているので書き換えました。
  • 2019年10月26日
    『旧バージョンを使うには』えお書き換えました。(内容が変わっています)

以前ご紹介したFontAwesomeですが、詳しく使い方を説明していなかったので今回は使い方を詳しく説明してみたいと思います。

「FontAwesomeってなに!?」という方はこちらを参考にしてください。

FontAwesome 公式
スポンサーリンク

FontAwesomeを使うための準備

2019年10月27日 書き換え

FontAwesomeを使うための準備をします。

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

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

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

FontAwesomeの使い方

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

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

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

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

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

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

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

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

サンプル

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

スポンサーリンク

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

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

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

色を変える

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

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

アイコンの幅を揃える

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

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

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

大きさを変える

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

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

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

回転

fa-spinを使うとアイコンを回転させることができます。
わかりやすく2倍で回転させています。

重ねる

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

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

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

応用編

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

サンプル1


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

サンプル2


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

サンプル3


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

サンプル4

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

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

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

丸で囲んだ数字

2

四角で囲んだ数字

3

CSS(スタイルシート)で設定する

CSS(スタイルシート)でアイコンフォントを指定する方法はこちらの記事で紹介しています。

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

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

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

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら

 

この記事を書いた人

結耶(ゆうや)

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