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

関連記事

jQuery

記事内の外部リンクを別窓で開き、画像などをつけて(CSS装飾して)わかりやすくする【jQuery】

外部リンク(他のサイト)は別窓(新しいタブで表示)。そして、外部リンクですよ!というのをアイコンをつ

記事を読む

ELLY95_hanatotegami

ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

このブログの記事したにある購読スペース(RSS登録とかTwitter、Facebook、Google

記事を読む

Stinger-minimum

Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!

今回このスマホ用「Stinger-minimum」を作りました。 子テーマ「Stinger-min

記事を読む

Wordpress1

WordPressでカテゴリーごとにデザインを変更する方法【Stingerカスタマイズ】

表題についてお問い合わせを頂きましたので、ブログにてご返答させて頂こうと思います。 今回は、エント

記事を読む

mac

WordPressの自動挿入されるpタグを削除する方法

WordPressにはpタグを自動挿入してくれる機能(auto paragraph)というものがあり

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2018年7月
    « 12月    
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  
電子書籍ストア BookLive!
PAGE TOP ↑