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. jQuery

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

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

  2. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  3. CSSフレームワーク

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

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

  4. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  5. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

  6. Web Design

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

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

コメント

  • コメント (2)

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

  1. こんにちはnabekouですw

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

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

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

    >nabekouさん(笑)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. Illustrator

    webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法
  2. Mac

    起きてしまった!MacOSのMarvericksの不具合
  3. デザイン

    人は色で判断している!?ブランディングにおける色彩設計の基本
  4. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
  5. 書評

    売り上げ不振の悩みを解決!「どうすれば売れるのか」を読んで
PAGE TOP