带有 Font Awesome 5 图标的复选框 [重复]

Question

有没有人已经设计了带有字体很棒的 5 个图标的复选框？

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

我更新到 FA5 并使用 CSS 伪元素运行其他东西，但在复选框内它没有运行。我对没有伪元素的其他解决方案持开放态度。

提前致谢！

小提琴示例：

Fiddle with 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>

Fiddle with 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>

Answer 1

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

Answer 2

以上对我不起作用。我正在使用 Bootstrap 3.3.7（也使用 bootstrap 3.4.0 测试）和 font awesome 5.5.0 free。 对我有用的是将其添加到我的自定义 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 中时，复选框周围的边距和 checkbox::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;
}

Answer 3

在将代码 font awesome 4 修改为 5 后，我在现有项目中也为细微的更改而苦苦挣扎，例如复选框 UI 样式，字体 awesome 消失了。在进行了一些研发和代码检查之后，按照我展示的简单步骤，用 font awesome 5 切换复选框。

只需为选中添加字体粗细

CSS 1. 使输入类型复选框/单选显示：无；
2. 在css的class之前或之后添加标签，并将字体系列称为“ font-family：'font awesome 5 free';”在 css 中给出一些内容类型 " content: "\f004"; " 3. 对于选中状态，只需应用 font-weight 超过 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>

Answer 4

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