HTML・CSS

Font Awesomeでラジオボタンをデザインしてみる

前回の「Font Awesomeでcheckboxをデザインしてみる」の記事の続きの内容になります。

ラジオボタンのデザインも「Font Awesome」を利用すると、簡単にいい感じのものが作れます。

Font Awesomeを使ったラジオボタンのデザインをいくつか紹介していきます。

Font Awesomeを使ったラジオボタンのデザイン

基本デザイン

<label>
  <input type="radio" name="radio1" class="radiobutton">
  <span class="radio-fontas"></span>ラジオボタン1
</label>
<label>
  <input type="radio" name="radio1" class="radiobutton">
  <span class="radio-fontas"></span>ラジオボタン2
</label>
.radiobutton {
  display: none;
}
label {
display:block;
}
.radio-fontas {
  vertical-align: middle;
  font-size: 22px;
}
.radiobutton + .radio-fontas:before {
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  color: #ccc;
  content: '\f192';
}
.radiobutton:checked + .radio-fontas:before {
  color: #2db29c;
}

デザイン2

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

デザイン3

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

デザイン4

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


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


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

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

ウェブつく管理人

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

-HTML・CSS
-,

© 2020 ウェブつく Powered by AFFINGER5