【簡単導入】ブログにアイコンフォント「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

関連記事

Stinger-minimum

子テーマ"Stinger-minimum"を新しくなった「STINGER5」用に作りなおしました。

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

ELLY95_hanatotegami

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

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしています。今回はこ

記事を読む

neko

過去のあの日あの時書いた記事を表示させるプラグイン「Remember Old Post Widget」

なんだか面白いなと思ったので導入してみたかったのですが、圧倒的な記事の少なさ。 なので、いつかこの

記事を読む

twitter1

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

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

記事を読む

ohajiki

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2017年7月
    « 12月    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
電子書籍ストア BookLive!
PAGE TOP ↑