【簡単導入】ブログにアイコンフォント「FontAwesome」を使ってみよう!

カテゴリー:WordPress    |    タグ:

【簡単導入】ブログにアイコンフォント「FontAwesome」を使ってみよう!

このカスタマイズの中で導入の手順や使い方を割愛したので、今日はその「FontAwesome」の使い方を書いておこうという回です。

「FontAwesome」ってなに??

Webフォントです。cssで色を変えたり大きさを変えたりすることのできるものです。
またcssだけでなく「FontAwesome」のクラス名でカスタマイズも可能です(以下に記載しました。)

フォントなので高解像度になっても綺麗に見えるというのが利点。

「FontAwesome」導入手順

ブログへの導入手順としては

  • CDNを利用する
  • ダウンロードして利用する

これら2つの方法があります。
1番簡単なのは、ひとつめのCDNを利用するです。

ココからはひとつめのCDNを利用する方法をご紹介します。

CSSを読み込む

header内に以下のものを記述します。(バージョンは2014/7/20現在)

はい!これでもう「FontAwesome」を使う準備は出来ました!
とっても簡単ですね!

「FontAwesome」使い方

リンク先にアイコン表があります。

①この中から使いたいアイコンをクリックします。
今回は、カレンダーアイコンを選びました。

あとは、真ん中あたりにでてくる<i>から</i>までをコピー

AW

あとは、表示させたいところへ貼り付けるだけです。
はい!これもすごく簡単!

以上でアイコンフォントは表示されているはずです。

「FontAwesome」のカスタマイズ

カスタマイズといってもcssでするものではなく、ここではFontAwesomeで用意してくれているタグを使った方法です。

サイズを変更する

クラス名にfa-2xを追加すると、アイコンのサイズが2倍になります。

追加できるクラス名は、fa-lg, fa-2x, fa-3x, fa-4x, fa-5x

アイコンの幅を揃える

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

枠(線)をつける

ボーダー(枠線)をつけることができます。追加するクラス名はfa-border

グルグル回るアイコンにする

アイコンが常時回転します。追加するクラス名はfa-spin

歯車アイコンなどで使うと良さそうです。ただし、IE8 - IE9はサポート外のようなので使う際は注意!

アイコンに角度をつける

cssでいうところのRotated & Flippedという動作をします。180度回転させるとかです。追加するクラス名は回転ならfa-rotate-*、反転ならfa-flip-*

アイコンを重ねて使う

少しわかりづらいですが、アイコンを2つ使ってそれらを組み合わせることができます。追加するクラス名はfa-fw


カスタマイズについてはリンク先を参照しました。
Bootstrapでの使い方なども書かれています。


敷居が高いように思われているWebフォント導入ですが、これだとあっという間にできるかと思います。
とっても簡単に導入できるので、ブログカスタマイズにおすすめです。

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/07/20    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

twitter1

【WordPress】TwitterCards(ツイッターカード)に対応する方法

先日、Twitterを始めたので、TwitterCards(ツイッターカード)にも対応。ということで

記事を読む

memotonewsp

【Stinger3カスタマイズ】だいぶ落ち着いたのでこのブログで変更したところを書き留めておく備忘録 #2

前にも書いたのですが、書き忘れていたものがあったので第二弾。 前のものはこちら、【Stinger3

記事を読む

memo

【Stinger3カスタマイズ】バージョンアップしたのでこのブログで変更したところを書き留めておく備忘録 #3

つい最近デザインを変更してみたのですが、どうにもノリノリでかけなくなってしまったのでまたデザインを元

記事を読む

Wordpress1

コメント欄をカスタマイズしたので備忘録メモ(コメントとトラックバックを分ける)

現在このブログでのコメント欄はJetPackのコメントを使用しています。 これです! が、こ

記事を読む

youtube

埋め込んだYouTubeなどの動画をスマホ用にCSSで最適化する方法

ブログに紹介したい動画を貼り付けて載せる場合には、埋め込みコードを使ってブログにコピペしますよね?

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年5月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑