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フレームワーク

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

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

  2. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

  3. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  4. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

コメント

  • コメント (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. illustration

    photoshopでモコモコの線を描くには?
  2. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法
  3. iPhone

    生活が変わるかも!iphone7 に変えてみて思ったこと
  4. デザイン

    お店の顔!仕事の幅も広がる私流ロゴデザインマニュアル
  5. Mac

    イラストレーターにオススメ!iPad Pro 9.7 wifiレビュー
PAGE TOP