如何设置输入复选框选中箭头的样式？ CSS

Question

我已经创建了一个跨度和一个输入复选框，但无法弄清楚如何通过给定的设计来设置选中箭头的样式，这是选中复选框的位置：

HTML：

  <label class="form-label">
    <input id="checkbox" type="checkbox">
    <span>title</span>
  </label>

CSS：

 .form-label {
  display: inline-flex;
  cursor: pointer;
  position: relative;
  }

 .form-label > input {
  height: 20px;
  width: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid #CDCDCD;
  border-radius: 4px;
  outline: none;
  background-color: #ffffff;
  cursor: pointer;
  }

 .form-label > input:checked {
  border: 1px solid #000000;
  background-color: #ffffff;
  }

  .form-label > input:checked + span::before {
  content: '\2713';
  display: block;
  text-align: center;
  color: #000000;
  position: absolute;
  left: 4px;
  top: -1px;
  }

 .form-label > input:checked + span::before:focus {
  outline: none;
  }
 

为示例创建了一个 Jsfiddle https://jsfiddle.net/ev2pxynL/1/

任何帮助将不胜感激，一段时间以来一直在努力解决这个基本问题。 我想完全按照设计中的方式创建箭头。

Answer 1

在您的复选框中，您使用的是预定义样式的内容。只是链接字体真棒 css 和更改内容

 .form-label > input:checked + span::before {
     content: '\f00c';
  }

或者只是谷歌如何在下面的链接中制作自定义复选框或结帐。 How TO - Custom Checkbox