Font-awesome 5 showing white box on pseudo elements?

Question

I am trying to use the font-awesome 5 on "li" element and it is showing the logo with the white box.

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