带有Font Awesome 5图标的复选框

Question

有没有人已经使用Font Awesome 5图标设计了复选框？

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

我升级到了FA5，并用CSS伪元素实现了其他功能，但是在复选框内部无法运行。我愿意尝试其他不需要伪元素的解决方案。

提前感谢！

Fiddle-Examples:

使用FA-4.7的Fiddle

/* 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的Fiddle

/* 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>

- markus_Redmine

---

你能展示一下你对复选框做了什么吗？不是很清楚你在问什么... - MBaas

是的，当然！我编辑了我的帖子！ - markus_Redmine

谢谢 - 这使得问题的重现/理解变得更加容易，也完全消除了关闭问题的原因。通常这些伪元素需要一个 display: none;（就像你对工作元素所做的那样），但是当我们将其添加到 .checkbox input[type="checkbox"]:checked+label::before 中时，它会显示得很好，但是复选框会消失，因此无法取消选中复选框，我没有解决方案。也许其他人会介入... - MBaas

这是一个Fiddle，只需几行CSS即可为单选按钮添加样式： https://jsfiddle.net/z2mxtk7g/ - flygge

Answer 1

上述方法对我无效。我正在使用Bootstrap 3.3.7（也在bootstrap 3.4.0上进行了测试）和免费的Font Awesome 5.5.0。对我有效的方法是将以下内容添加到我的自定义CSS文件中：

/* 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 中会导致复选框周围的边距和复选框 ::before 内部的填充略微偏离。所以我使用了这个：

.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;
}

- MarcM

Answer 2

使用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;}

- andyJK

---

我自己也遇到了这个问题。只有 font-weight：900 对我有效，100 不行。 - Charles

Answer 3

  .wishChkBox  input[type='checkbox'] {
    display:none;
}
 .wishChkBox   input[type='checkbox']+ label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f004";
 font-size:1.5rem;
 cursor:pointer;
 
 }
 .wishChkBox  input[type='checkbox']:checked + label:before {
     font-weight:600;
 
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
 <div class="wishChkBox">
 
            <input type="checkbox" id="wish1" name="wish1"  />
            <label for="wish1"> </label>
          </div>

- Noel Ndam

---

你好！欢迎来到 Stack Overflow！请不要发布没有任何解释的仅包含代码的答案。 - adrenalin

Answer 4

在将代码从字体awesome 4改为5后，我在现有项目中遇到了很多小问题，例如使用字体awesome的复选框UI样式。经过一些研究和代码检查，我展示了一些简单的步骤来实现带有字体awesome 5的复选框切换。

只需添加已选字体重量

CSS 1. 将输入类型checkbox/radio设置为display:none;
2. 在css中添加label before或after类，并将字体系列引用为“font-family: 'font awesome 5 free';”，在css中给出一些内容类型“content: "\f004";” 3. 对于已选状态，只需应用大于600的字体重量

HTML 1. 将标签放置在复选框之后，并引用复选框id。

  .wishChkBox  input[type='checkbox'] {
    display:none;
}
 .wishChkBox   input[type='checkbox']+ label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f004";
 font-size:1.5rem;
 cursor:pointer;
 
 }
 .wishChkBox  input[type='checkbox']:checked + label:before {
     font-weight:600;
 
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
 <div class="wishChkBox">
 
            <input type="checkbox" id="wish1" name="wish1"  />
            <label for="wish1"> </label>
          </div>

- surya ramakanth