html - Font-awesome 5 在伪元素上显示白框？

Question

我正在尝试在“li”元素上使用 font-awesome 5，它显示带有白框的徽标。

HTML：

  <div class="form-action">
      <ul class="select-bar">
          <li class="checkIn">
              <input type="text" id="datepicker">
          </li>
      </ul>
  </div>

CSS：

.checkIn input{
    width:170px;
    height:42px;
    padding:0px 0px 0px 40px;
}
.form-action .checkIn:before{
    content: "\f073";
    font-family: "Font Awesome 5 Regular";
    font-weight: 900;
    color: #777;
}