Use Font Awesome in input submit value

by Darko

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1" />
<input type="submit" value="&#xf217;" class="btn" />
</form>

CSS

.card-wrapper {
  height: auto;
}

form {
  display:block;
}

input {
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  border-radius: 0px;
  border: 1px solid #cccccc;
  padding: 5px 10px;
  line-height: 1;
  float: left;
}


input[type="submit"] {
  display: block;
  background-color: red;
  color: #fff;
  border: solid 1px red;
  cursor: pointer;
  font-family: 'Font Awesome 5 Free', sans-serif;
   -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 900;
  font-size: 20px;
  height: 42px;
}