带有Font Awesome 5图标的复选框 [英] Checkboxes with Font Awesome 5 icons

问题描述

有人设计过带有字体超赞5个图标的复选框吗?

Did anyone already designed checkboxes with font awesome 5 icons inside?

我已经在Google上进行了搜索，仅找到了FA-4的示例，例如 http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

I've already googled it and found only examples for FA-4 like http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

我更新到FA5并使用CSS伪元素运行其他内容，但在复选框内未运行.我愿意接受其他没有伪元素的解决方案.

I updated to FA5 and got other things with CSS pseudo elements to run, but inside a checkbox it's not running. I'm open to other solutions without pseudo elements.

提前谢谢！

小提琴示例:

用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, 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>

用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, 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>

推荐答案

上面的内容不适用于我.我正在使用Bootstrap 3.3.7(也在Bootstrap 3.4.0中进行了测试)和免费的5.5.0字体. 对我有用的是将其添加到我的自定义css文件中:

The above did not work for me. I'm using Bootstrap 3.3.7 (tested also with bootstrap 3.4.0) and font awesome 5.5.0 free. What did work for me is adding this to my custom css file:

/* To get rid of the original and the benefit of not having the blue outline on focus */
input[type='checkbox'], input[type='radio'] {
    display:none;
}
.checkbox input[type='checkbox'] + label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00c";
    color: #fff;
}
/* font weight is the only important one. The size and padding makes it look nicer */
.checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 3px;
    padding-top: 0px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    content: "";
}

似乎将这种复选框放在.input-group-addon中时，该复选框周围的边距和checkbox :: before内部的填充有些偏离.所以我用这个:

It seems that when putting this kind of checkbox in a .input-group-addon the margin around the checkbox and the padding inside the checkbox::before is a little off. So I use this:

.input-group-addon .checkbox, .input-group-addon .radio {
    margin-top: 0px;
    margin-bottom: 0px;
}
.input-group-addon .checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 2px;
    padding-top: 2px;
}

这篇关于带有Font Awesome 5图标的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！