HTML・CSS

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でラジオボタンをデザインしてみる」の記事もご覧ください。

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


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-HTML・CSS
-,

© 2020 ウェブつく Powered by AFFINGER5