menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/02/02
  • CSS
  • html5

簡単で便利な「Font Awesome」の使い方

アイコンWebフォント「Font Awesome」。使い方を覚えておくと、利用できる幅がかなり広がる
fontawesomeの使い方

使用方法

ダウンロード

公式サイトから、ライブラリを入手


fa1

準備するファイル

css
∟ font-awesome.css

font
∟ fontawesome-webfont.eot
 fontawesome-webfont.svg
 fontawesome-webfont.ttf
 fontawesome-webfont.woff
 fontawesome-webfont.woff2
 FontAwesome.otf


zipファイルを解凍し、CSSファイルとフォントフォルダをサーバーにアップロードしてください。「font-awesome.css」と、「fontsフォルダ」のパスが変わらないように気をつけて下さい。

外部ファイルの読み込み

他のスタイルシートファイルと同じように「font-awesome.css」を読み込みます。

表示方法

表示方法は簡単です。<i>タグで要素を作り各アイコンごとのclass属性を設定するだけです。
公式サイト→Iconsへ行き表示したいアイコンを選びます。

使用例

ブラウザ上での表示例

 home 

 feed 

 favicon 

 music 

 mail 

サイズの変更

独自のCSSでアイコンサイズを設定することもできますが、「fa-2x」「fa-3x」を追加することによって、数字に応じて2、3倍になります。倍率は「fa-5x」まであります。

 home

 home

 home

 home

 home

均等に整列

アイコンはそれぞれ大きさが異なるので縦に並べるとズレが生じます。「fa-fw」を追加することで均等に整列させることができます。

未設定

 home

 feed

設定後

 home

 feed

アニメーション

「fa-spin」「fa-pulse」で回転アニメーションを付けることができます。

「fa-spin」







「fa-pulse」





角度の指定/反転させる

「fa-rotate-90、180、270」の3種類の角度が設定できます。

 通常

 90度

 180度

 270度

「fa-flip-horizontal」「fa-flip-vertical」の3種類の角度が設定できます。

 通常

水平方向

 垂直方向

とても簡単に表示できるのでメニューなどに使用するといいアクセントになりおすすめです。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11