Font Awesomeでチェックボックスをデザインしてみる

checkboxのデザインに悩んでいる人は「Font Awesome」を利用すると、簡単で見栄えも良いものが作れます。

この記事ではFont Awesomeを使ったチェックボックスのデザインをいくつかピックアップしていきたいと思います。

Font Awesomeを使ったcheckboxデザイン

基本デザイン

チェックの有無によって、色が切り替わるというデザインです。

<label>
  <input type="checkbox" class="checkbox">
  <span class="checkbox-fontas"></span>
  チェックボックス
</label>

.checkbox {
  display: none;
}
.checkbox-fontas {
  position: relative;
  vertical-align: middle;
  font-size: 21px;
}
.checkbox + .checkbox-fontas:before {
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  content: '\f00c';
  color: #ccc;
}
.checkbox:checked + .checkbox-fontas:before {
  color: #2db29c;
}

デザイン2

基本デザインのcontent: '\f14a';の部分をcontent: '\f00c';に変更するだけです。

デザイン3

content: '\f058';に変更します。

デザイン4

content: '\f4fc';に変更します。

デザイン5

content: '\f274';に変更します。

以上がFont Awesomeの主要なcheckデザインでした。Font AwesomeのPROなら、もっと多くのデザインがありますよ。

また「Font Awesomeでラジオボタンをデザインしてみる」の記事もご覧ください。

上手く動かない方は以下の記事も参考に。

• input要素のlabel（ラベル）がクリックできないときの対処法