自定义复选框使用字体awesome和css

Question

我正在制作一个自定义复选框，其中包含字体awesome和css。

点击/当复选框被选中时，我尝试在黑色复选框周围创建一些填充（在选中/点击时在白框中有一个较小的黑框）

＆＃13;

＆＃13;

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/

/*** custom checkboxes ***/

input[type=checkbox] {
  display: none;
}
/* to hide the checkbox itself */

input[type=checkbox] + label:before {
  font-family: FontAwesome;
}
input[type=checkbox] + label:before {
  content: "\f096";
}
/* unchecked icon */

/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/

/* space between checkbox and label */

input[type=checkbox]:checked + label:before {
  content: "\f0c8";
}
/* checked icon */

input[type=checkbox]:checked + label:before {
  letter-spacing: 5px;
}
/* allow space for check mark */

＆＃13;

<div>
  <input id="box1" type="checkbox" />
  <label for="box1"></label>
  <br>
  <input id="box2" type="checkbox" />
  <label for="box2"></label>
  <br>
  <input id="box3" type="checkbox" />
  <label for="box3"></label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

喜欢这个吗？

＆＃13;

＆＃13;

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/

/*** custom checkboxes ***/

input[type=checkbox] {
  display: none;
}
/* to hide the checkbox itself */

input[type=checkbox] + label:before {
  font-family: FontAwesome;
}
input[type=checkbox] + label:before {
  content: "\f096";
}
/* unchecked icon */

/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/

/* space between checkbox and label */

input[type=checkbox]:checked + label:before {
  content: "\f0c8";
  font-size:12px;
  margin-left:1px;
}
/* checked icon */

input[type=checkbox]:checked + label:before {
  letter-spacing: 5px;
}
/* allow space for check mark */

＆＃13;

<div>
  <input id="box1" type="checkbox" />
  <label for="box1"></label>
  <br>
  <input id="box2" type="checkbox" />
  <label for="box2"></label>
  <br>
  <input id="box3" type="checkbox" />
  <label for="box3"></label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您使用单个字符，因此无法添加字母间距。

我建议这样的事情。

缩小替换图标/字符的大小，添加填充和边框。或者，搜索一个正确的图标/字符，显示您想要的图像/字符并使用它。

＆＃13;

＆＃13;

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/

/*** custom checkboxes ***/

input[type=checkbox] {
  display: none;
}
/* to hide the checkbox itself */

input[type=checkbox] + label:before {
  font-family: FontAwesome;
}
input[type=checkbox] + label:before {
  content: "\f096";
}
/* unchecked icon */

/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/

/* space between checkbox and label */

input[type=checkbox]:checked + label:before {
  content: "\f0c8";
  display: inline-block;
}
/* checked icon */

input[type=checkbox]:checked + label:before {
  font-size: 60%;
  border: 1px solid black;
  vertical-align: top;
  padding: 2px;
  border-radius: 2px;
}
/* allow space for check mark */

＆＃13;

<div>
  <input id="box1" type="checkbox" />
  <label for="box1"></label>
  <br>
  <input id="box2" type="checkbox" />
  <label for="box2"></label>
  <br>
  <input id="box3" type="checkbox" />
  <label for="box3"></label>
</div>

＆＃13;

＆＃13;

＆＃13;