font-awesomeをcssのbackgroundとして使う的なお話

backgroundのチェックボックスとかラジオボタンをCSS3で装飾した際に、
チェックしてるかどうかをわかりやすくするためにアイコンを使いたいとかそういう事がある。
もちろんbackground-imageとかで画像を読み込めばいいけど、
でも画像をいちいち用意するのが面倒だしっていうこともある。

ということで今回は画像を使わずにアイコンを使うためにfont-awesomeをbackgroundに適用するお話をば。

label:before{
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  content:'\f00c';
  font-family: FontAwesome;
  color:#bbb;
}

ちなみに面倒だからチェックボックスとかラジオボタンは既に装飾済みな感じで。
ってやるとOK。
とりあえず重要なのはfont-familyをFontAwesomeにして、contentを指定してあげること。

画像を用意するとか面倒だし、そもそもレスポンシブな時代ってことを考えるとアイコンフォントって便利だし。
出来るだけ手間をかけずにするんだったらこれがいいんじゃないかと。