大佬教程收集整理的这篇文章主要介绍了css – 带有Font Awesome 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"; }
<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>
/* 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"; }
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script> <script> window.FontAwesomeConfig = { searchPseudoElements: true } </script> <div class="checkbox"> <input type="checkbox" id="profile_notifications" value="" checked/> <label for="profile_notifications"> Doesn't work! </label> </div> <div class="test"> <label class="pseudo-element">This works!</label> </div>
只需更改字体粗细即可.
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;}
以上是大佬教程为你收集整理的css – 带有Font Awesome 5图标的复选框全部内容,希望文章能够帮你解决css – 带有Font Awesome 5图标的复选框所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。