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

関連記事

h2

ブログの見出しデザインに困ったのでこのジェネレータを使ってみた『 CSS見出しジェネレーター | Web道』

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしているのですが、見

記事を読む

Stinger-minimum

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

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

記事を読む

Wordpress1

【WordPress】ウィジェットのタグクラウドをプラグインを使わずにカスタマイズする方法

タグクラウドをウィジェットを使って表示させたのですが、ウィジェット側では文字の大きさや並び順等を操作

記事を読む

image

少しの手間をかけて抜粋部分を表示する。だってそれは読んでほしいから!

この抜粋部分に意図しないものが入ってしまい読んでほしいブログが残念な感じにならないように。 抜粋は

記事を読む

neko

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

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

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

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