有人已经设计了带有字体真棒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";
}
/* 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";
}
最佳答案
使用Font Awesome 5图标作为复选框
只需更改字体粗细即可.
input[type='checkbox'] {display:none;}
input[type='checkbox'] + label:before {
font-family: 'Font Awesome 5 Free';
display: inline-block;
}
/* unchecked */
input[type='checkbox'] + label:before {
content: "\f00c";
font-weight:100;
}
/* checked */
input[type='checkbox']:checked + label:before {font-weight:900;}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。