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

関連記事

ELLY95_hanatotegami

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

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

記事を読む

Wordpress1

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

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

記事を読む

wordpress_stickers_everywhere

WordPress3.7がリリースされたので変更点の確認と気をつけるべき点をメモ

自分のプライベートブログなので、いつもは何となく変更点をさっくり見てさっさとアップデートしているので

記事を読む

side-no

Stinger3でスマホ用子テーマを使っている方はここにご注意だ!と思ったところ

最近スマホ用子テーマを作成したのですが、その方のブログを見たときはっ!っとなり、気になったので。

記事を読む

image

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

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

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

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