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

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

  2. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  3. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  4. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

  5. illustration

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

    こんにちは。mayukouです。今回は、photoshopでモ…

  6. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

コメント

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

    デザイン

    Indesignを使って、冊子を作りました!
  2. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2
  3. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
  4. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ
  5. ブログ

    ポートフォリオサイトをリニューアルしました
PAGE TOP