こんにちは、mayukouです。
css nite Fukuoka の鷹野さんのお話にも少し出てきた、Font awesome。
これは、最近よく使われているwebフォントだそうです。
先日使い方を会社で教えていただいたので、メモしておこうと思います。
これを使えば、メニューなどに使われる、
文字の横にある小さいアイコンを表示させたりすることが
簡単にできますよ。
今回は、その使い方について、ご紹介しようと思います。
スポンサードリンク
webフォントとは
webフォントとは、簡単に言うと、ネット上にフォントをアップして
フォントを読み込ませる方法で使われます。
だから、パソコンに入っていないフォントであったとしても、
ウェブ上に表示することが可能です。
フォントは、文字だけでなく、イラストを使ったフォントも使えるため、いろいろな表現が可能です。
フォントなので、大きさや色を変えることも可能です。
Font Awesomeとは
随時種類が追加されているようですが、現時点では439種類ものアイコンフォントが使用できます。
本サイトのiconsメニューからフォントを確認できますよ。
Font Awesomeの使い方
1.Font AwesomeサイトからCSSを読み込む
方法はいくつかあるのですが、これは一番簡単な方法です。
<head>タグの間に、
1 | <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> |
を挿入します
2.Font Awesomeサイトに掲載されているアイコンを選び、指定されたタグ・クラスを挿入する
フォントの種類によって、クラスが決められています。<li>要素に指定されたクラスを振っています。
サイトにコードが書かれているので、そのままコピーしてOKです。
3.サイズや色を変えたい場合
CSSのfont-colorやfont-sizeを指定しましょう。
ちなみに、この方法の場合、サーバーにアップしないと確認できないようですので、ご注意ください。
CSSとして使いたいとき
上記の方法は、直接HTMLにコードを入れるというやり方でしたが、
デザインによっては、コードをいじらずにCSSだけで表示したい場合も出てきます。
そのときは、上記の1.の方法と同じく、cssにfont-awesomeを読み込みます。
そして、:before属性を用いて使用します。プロパティは、contentで、その中に指定されたユニコードを入れます。
書き方は、↓こんな感じになります。
1 2 3 4 | li:before { content: "\f0c9"; font-family: FontAwesome; } |
必ず、ユニコードの前には、バックスラッシュ（\）を入れましょう。
これで、完成です。
最後に
いかがでしたか？このFont Awesomeを使えば、今まで画像を使っていた部分も、たった一、二行のコードで済むことになりますね。
私のサイトのナビゲーションにも、Font Awesomeを入れてみました。
ぜひ、ご活用を！
ちなみに、Illustratorにも読み込むことができるということですが、それはまた検証して次回〜
投稿者プロフィール
- Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2018.11.10Photoshop画像からフォントを探してくれる！Photoshopのマッチフォントが素敵。
- 2018.09.02CSSフレームワークサイト制作が早くなる！Bootstrapの特徴
- 2018.08.04jQueryJQueryで要素を消すスクリプト！ECサイトの注意書きにもオススメ！
- 2018.07.31jQueryスマホに使える！３階層のアコーディオンメニューを作りました！
こんにちはnabekouですw
font awesomeとほとんど同じなんだけど、BootstrapのGlyphiconもおすすめですよ。
フォントの数では負けますが、Bootstrapって点でおすすめです。もちろん共存もできますからはじめに二つとも入れちゃえばいいんですけどね！
>nabekouさん（笑）
いつも貴重な情報ありがとうございます。
すごいなーと尊敬してます。
Glyphiconですか。知りませんでした（^^)
nabekouさんのように、Bootstrap使えるようがんばります！