创建带圆圈图标的复选框

Question

我想要一些帮助让我发疯，哈哈哈。所以我有这样的复选框：

所以，我有我的UX＆UI同事为此项目设计的设计，我需要与此类似的东西：

如您在上图中所看到的，我需要在没有复选框的情况下实现某种功能，并且当我选择一个Icon时，边框上必须显示一个蓝色，以便让用户知道该选项已被选中。

我为此使用的资源是materializeCSS复选框，而我当前的CSS如下：

/*Checkboxes*/
[type="checkbox"]:checked + span:not(.lever):before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #2372bd;
    border-bottom: 2px solid #2372bd;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/*Checkboxes*/
[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #888888;
    border-radius: 1px;
    margin-top: 3px;
    -webkit-transition: .2s;
    transition: .2s;
}

//This are the current circles that wrapps the icons
.services-circle{
  border: 1px solid #858585;
  width: 45px;
  margin-top: 10px;
  margin-bottom: 20px;
  height: 45px;
  border-radius: 50%;
}

//Current HTML
<label>
   <div class="services-circle center-align">
     <i class="material-icons-two-tone px32 no-margin-top-bottom">fireplace</i>
      <input name="property[services_attributes][0][gas]" type="hidden" value="0"><input 
 type="checkbox" value="1" name="property[services_attributes][0][gas]" 
 id="property_services_attributes_0_gas">
     <span for="gas">Gas</span>
    </div>
</label>

注意：如果我选择图标或圆圈，它会被选中，所以我想这不错

因此，丢失的互联网中是否有一些很酷的资源可以做这样的事情？或者，如果有一些基本的代码促使我实现这样的目标，那就太糟糕了！感谢您的帮助！

Answer 1

设置要显示的复选框：无；