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

2018年9月14日

  • 2019年4月20日
    少し書き足しと書き換えをしました。(ないように変更はありません)
  • 2019年3月21日
    以前『旧バージョンを使ってみた!』という記事がありましたが統合して『旧バージョンを使うには?に書き換えました。

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

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

 

FontAwesome | https://origin.fontawesome.com/

 

スポンサーリンク

 

 

FontAwesomeを使うための準備

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

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

 

表示させるためのコード

FontAwesomeのサーバーからデータを読み込んでブログに表示させます。
まずはサーバーから読み込んで表示させるためのコードを取得します。

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

2 FontAwesomeのページ上部の『How to Use』をクリック。

スマホの場合

左上のをクリック⇒『How to Use on the Web』⇒『Getting Started』の順番で進んでください。

3 表示されたページの赤枠部分のコードをコピー

4 コピーしたコードを自分のサイトの<HEAD> ~ </HEAD>間に挿入してください。

 

表示させるためのコード

 注意!コードを載せておきますが、バージョンが変わったりするため、導入される場合はFontAwesomeのページから最新のコードをコピーしてお使いください。

 

ページで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(スタイルシート)でアイコンフォントを指定する方法はこちらの記事で紹介しています。

 

 

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

上は最新バージョンのFontAwesome5です。

まだ旧バージョン4を使っている人や「使いたい!」という人がいるかもしれないのでバージョン4の導入方法をご紹介します。

ただし、最新バージョンは5になっていますので、今はまだ4も使えますがサービスが停止される可能性もあります。ご注意ください。

 

コードの取得

1 FontAwesome5ページの下のフッターメニューに『Old version4.7』とありますのでクリックしてバージョン4のページに移動します。

※表示されない場合はこちら Font Awesome4.7

2 上部にある『Set Started』をクリック

3 「Font Awesome CDN」欄にメールアドレスを入力するフォームがあります。
メールアドレスを入力して右側の Send my Font Awesome embed code! をクリックします。

4 メールが届くのでその中に書いてあるコードをコピーして<HEAD>内に入れてください。

 

コード

こちらのコードは以前使っていたテーマ STINGER PLUS2で私が実際にHEAD内に入れていたコードです。
このコードでもアイコンは表示されると思います。

 

使い方

使い方はバージョン5と同じです。

ただし、CSSで指定する場合は以下のようになります。

 
何度もいますが、バージョン4はサービスが終了する可能性がありますので導入するなら最新バージョン5の方がいいと思います。

 

 

最後に

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

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

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

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

 

スポンサーリンク

 

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

 

この記事を書いた人

結耶(ゆうや)

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