Webアイコンフォント「Font Awesome」で素敵なピクトグラムを簡単利用

Webアイコンフォント「Font Awesome」で素敵なピクトグラムを簡単利用 – メディアデザイン実習J
Font Awesome
http://fontawesome.io/

 

これは何?

「Font Awesome」は、Webアイコンフォントです。
アイコン(ピクトグラム)を、文字(インラインテキスト)としてHTMLページ上に表示させることが出来ます。
「Font Awesome」をページに読み込んでおくだけで、SVGで作られた沢山の美しいアイコンを好きな箇所でいつでも呼び出すことができます。

インラインテキストなので、テキストの頭にポンと表示させてもベースラインが狂わず、非常に使いやすいです。

 

使用例

http://dev.koekatamarin.com/kanazawa/

 

準備

http://fontawesome.io/get-started/

1. ダウンロードして、公開ディレクトリに設置
2. <head>タグ内でパスを通す
<link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>

 

使い方

http://fontawesome.io/examples/

<i class=”fa fa-camera-retro”></i>

 

どんなアイコンがあるのか

http://fontawesome.io/icons/

Twitterのアイコンを表示したいな。。。

「twitter-square」っていうのがぴったりだ

<i class=”fa fa-twitter-square”></i>

 

大きくするには

<i class=”fa fa-camera-retro fa-5x”></i>

2x 3x 4x 5x まであります。