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. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  2. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  3. Web Design

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

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

  4. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ

    みなさんCSSフレームワークをご存知ですか?最近CSSフレームワー…

  5. Web Design

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

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

  6. jQuery

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

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

コメント

  • コメント (2)

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

  1. こんにちはnabekouですw

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

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

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

    >nabekouさん(笑)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. ブログ

    明けましておめでとうございます。今年の抱負
  2. wordpress

    自分のブログを冬仕様に!wordpressに雪を降らせるプラグイン
  3. wordpress

    wordpressバックアップツールの決定版!All in one Migrat…
  4. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方
  5. コピーライティング

    コピーライティングを学ぶ。わたしがやっている勉強法とコピーの作り方
PAGE TOP