是否有人已经设计了内部带有5个超赞字体图标的复选框?
我已经在Google上搜索过,仅找到FA-4的示例,例如http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
我更新到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, 0, 0.075);
font-family: "FontAwesome";
}
.checkbox input[type="checkbox"]:checked+label::before {
content: "\f00c";
}
Run Code Online (Sandbox Code Playgroud)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="checkbox">
<input type="checkbox" id="profile_notifications" value="" checked/>
<label for="profile_notifications">
I agree
</label>
</div>
Run Code Online (Sandbox Code Playgroud)