如何在 Algolia Instant Search 中将复选框更改为图标？答案

【问题标题】：How to change checkbox to Icon in Algolia Instant Search?如何在 Algolia Instant Search 中将复选框更改为图标？
【发布时间】：2020-01-07 23:50:49
【问题描述】：

Algolia instand search 提供的复选框和标签如下：

<label class="ais-RefinementList-label">
    <input type="checkbox" class="ais-RefinementList-checkbox" value="Stroke">
    <span class="ais-RefinementList-labelText">Stroke</span> <span class="ais-RefinementList-count">986</span> 
</label>

我很想用 Font Awesome 图标替换默认复选框。这样做的唯一方法是基于此示例： http://jsfiddle.net/4huzr/

但这里的设置完全不同 <input /><label> 而不是 <label><input /></label>。到底能不能实现？

【问题讨论】：

喜欢这个？ jsfiddle.net/d73txLpj 如果您可以提供代码的工作示例那么我也可以帮助您在其中添加 FontAwesome
如果你有一个正常工作的 sn-p 我们可以提供帮助
我在这里准备了一个样本 => jsfiddle.net/SchweizerSchoggi/f5j9d73m/16 这有帮助吗？

标签： html css algolia

【解决方案1】：

您还需要为 span 添加相同的 css：

input[type=checkbox] {
  display: none;
}
 
input[type=checkbox] + label,
input[type=checkbox] + span
{
  display:inline-block;
  padding-left: 20px;
  position: relative;
}
input[type=checkbox] + label:before,
input[type=checkbox] + span:before
{
  content:"";
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0;
  position: absolute;
  left:0 ;
  top: 2px;
}
input[type=checkbox]:checked + label:before,
input[type=checkbox]:checked + span:before
{
  content: "\f00c";
  font-family: 'FontAwesome';
   background: blue;
   color:#fff;
   font-size: 14px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
This one works with a replacement:<br />
<input type='checkbox' name='thing1' value='valuable' id="thing1"/>
<label for="thing1">Thing 1</label>


<hr />

This one does not:<br />
<label class="ais-RefinementList-label">
    <input type="checkbox" class="ais-RefinementList-checkbox" value="Stroke">
    <span class="ais-RefinementList-labelText">Thing 2</span> 
</label>

【讨论】：