字体真棒5显示伪元素的白盒子？

Question

我正在尝试使用font-awesome 5 on＆＃34; li＆＃34;元素，它显示白色框的标志。

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;
}