Web Design

メニューアイコンに最適!webフォント、Font Awesomeの簡単な使い方


こんにちは、mayukouです。
css nite Fukuoka の鷹野さんのお話にも少し出てきた、Font awesome。
これは、最近よく使われているwebフォントだそうです。

先日使い方を会社で教えていただいたので、メモしておこうと思います。

これを使えば、メニューなどに使われる、
文字の横にある小さいアイコンを表示させたりすることが
簡単にできますよ。
今回は、その使い方について、ご紹介しようと思います。

スポンサードリンク

webフォントとは

webフォントとは、簡単に言うと、ネット上にフォントをアップして

フォントを読み込ませる方法で使われます。
だから、パソコンに入っていないフォントであったとしても、
ウェブ上に表示することが可能です。
フォントは、文字だけでなく、イラストを使ったフォントも使えるため、いろいろな表現が可能です。
フォントなので、大きさや色を変えることも可能です。

 

Font Awesomeとは

font-awesome

随時種類が追加されているようですが、現時点では439種類ものアイコンフォントが使用できます。
本サイトのiconsメニューからフォントを確認できますよ。

 

Font Awesomeの使い方

1.Font AwesomeサイトからCSSを読み込む

方法はいくつかあるのですが、これは一番簡単な方法です。
<head>タグの間に、

を挿入します

 

2.Font Awesomeサイトに掲載されているアイコンを選び、指定されたタグ・クラスを挿入する

font-awesome-2

フォントの種類によって、クラスが決められています。<li>要素に指定されたクラスを振っています。

サイトにコードが書かれているので、そのままコピーしてOKです。

 

3.サイズや色を変えたい場合

CSSのfont-colorやfont-sizeを指定しましょう。

ちなみに、この方法の場合、サーバーにアップしないと確認できないようですので、ご注意ください。

 

CSSとして使いたいとき

上記の方法は、直接HTMLにコードを入れるというやり方でしたが、

デザインによっては、コードをいじらずにCSSだけで表示したい場合も出てきます。

そのときは、上記の1.の方法と同じく、cssにfont-awesomeを読み込みます。
そして、:before属性を用いて使用します。プロパティは、contentで、その中に指定されたユニコードを入れます。
unicode

 書き方は、↓こんな感じになります。

必ず、ユニコードの前には、バックスラッシュ(\)を入れましょう。
これで、完成です。

 

 

最後に

いかがでしたか?このFont Awesomeを使えば、今まで画像を使っていた部分も、たった一、二行のコードで済むことになりますね。

私のサイトのナビゲーションにも、Font Awesomeを入れてみました。

font-awesome-3

ぜひ、ご活用を!

ちなみに、Illustratorにも読み込むことができるということですが、それはまた検証して次回〜

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  2. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  3. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  4. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  5. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  6. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

コメント

  • コメント (2)

  • トラックバックは利用できません。

  1. こんにちはnabekouですw

    font awesomeとほとんど同じなんだけど、BootstrapのGlyphiconもおすすめですよ。

    フォントの数では負けますが、Bootstrapって点でおすすめです。もちろん共存もできますからはじめに二つとも入れちゃえばいいんですけどね!

  2. mayukou
    • mayumi
    • 2014年 10月 13日

    >nabekouさん(笑)

    いつも貴重な情報ありがとうございます。
    すごいなーと尊敬してます。

    Glyphiconですか。知りませんでした(^^)
    nabekouさんのように、Bootstrap使えるようがんばります!

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Mac

    起きてしまった!MacOSのMarvericksの不具合
  2. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法
  3. free font

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト
  4. indesign

    デザイン

    Indesignを使って、冊子を作りました!
  5. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える
PAGE TOP