Как использовать шрифт удивительные иконки или Bootstrap глифы, чтобы действовать как флажок

Question

Здесь я хочу, чтобы эти значки стульев были отмечены флажками, они должны действовать как флажки, поэтому, если я нажму эту кнопку, она станет зеленой, а если она не будет отмечена, она снова станет черной.

<div class="container" style="background-color: #ffe2db;height: 600px;position: absolute;top: 150px;left:0;right: 0;border-radius: 20px;">
    <div class="container" style="margin-top: 100px;margin-left: 30px;">
    <i class="fas fa-chair"></i><i class="fas fa-chair"></i><i class="fas fa-chair"></i><i class="fas fa-chair"></i><i class="fas fa-chair"></i>
    </div>
</div>

Answer 1

Если вы используете флажок ввода, это становится очень простым. Это правило css установит зеленый цвет текста следующей метки:

input:checked + label {
  color: green;
}

HTML:

<input type="checkbox" name="test">
<label for="test"><i class="fas fa-chair"></i>...</label>

Answer 2

Возможно, вы сможете использовать псевдоселектор :before, а затем использовать background-image, чтобы назначить местоположение изображения glphyicon.

.checkbox.checked:before {
  display: flex;
  background-image: url('path/to/green-checked.png');
  content: '';
  width: 25px;
  height: 25px;
}

.checkbox:before {
  display: flex;
  background-image: url('path/to/black-checked.png');
  content: '';
  width: 25px;
  height: 25px;
}

Если глифик представляет собой таблицу спрайтов, вам необходимо добавить дополнительные свойства:

.checkbox.checked:before {
  display: flex;
  background-image: url('path/to/spritesheet.png');
  background-position: -25px -25px;
  overflow: hidden;
  content: '';
  width: 25px;
  height: 25px;
}

.checkbox:before {
  display: flex;
  background-image: url('path/to/spritesheet.png');
  content: '';
  background-position: -25px -50px;
  overflow: hidden;
  width: 25px;
  height: 25px;
}

В любом случае вы должны применить свойство content для псевдо селектор, чтобы сделать что-нибудь внутри него.