css – 带有Font Awesome 5图标的复选框

前端之家收集整理的这篇文章主要介绍了css – 带有Font Awesome 5图标的复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有人已经设计了带有字体真棒5个图标的复选框吗?

我已经用谷歌搜索了它,发现只有像http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/这样的FA-4的例子

我更新到FA5并使用CSS伪元素运行其他东西,但在复选框内它没有运行.我对没有伪元素的其他解决方案持开放态度.

提前致谢!

小提琴,例如:

Fiddle with FA-4.7

/* CheckBoxes */

.checkBox input[type="checkBox"] {
  display: none;
}

.checkBox label {
  padding-left: 0;
}

.checkBox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  Box-shadow: inset 0 1px 1px rgba(0,0.075);
  font-family: "FontAwesome";
}

.checkBox input[type="checkBox"]:checked+label::before {
  content: "\f00c";
}
Box">
  Box" id="profile_notifications" value="" checked/>
  

Fiddle with FA-5

/* CheckBoxes */

.checkBox {
  padding-left: 10px;
  padding-top: 10px;
}

.checkBox input[type="checkBox"] {
  display: none;
}

.checkBox label {
  padding-left: 0;
}

.checkBox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  Box-shadow: inset 0 1px 1px rgba(0,0.075);
  font-family: "Font Awesome 5 Solid";
  
}

.checkBox input[type="checkBox"]:checked+label::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}

.test {
  padding-left: 10px;
  padding-top: 10px;
}
.test .pseudo-element:before {
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}

猜你在找的CSS相关文章