有人已经设计了带有字体真棒5个图标的复选框吗？
我已经用谷歌搜索了它,发现只有像http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/这样的FA-4的例子
我更新到FA5并使用CSS伪元素运行其他东西,但在复选框内它没有运行.我对没有伪元素的其他解决方案持开放态度.
提前致谢！
小提琴,例如：
/* 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/>
/* 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";
}