Change input button text to Font Awesome icon

Question

I have an input button with text 'Add'. I would like to change the styling so that I can add a Font Awesome icon. How can I achieve this?

Here is the fiddle: https://jsfiddle.net/fvj1dcyw/

.card-wrapper {
    height: auto;
}
  
  
input.btn {
    background-color: red;
    color: #fff;
    border: none;
    font: inherit;
    cursor: pointer;  

<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="Add" class="btn" />
</form> 

Thank you

Answer 1

it's pretty simple, you just need to replace the value with unicode value of an icon ( you can find it here: https://fontawesome.com/v5/icons/cart-plus?s=solid ), in this case I picked a cart icon with unicode value of f217, then set the value of input field value like this &#x+ icon_unicode_value + ;

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

And apply the CSS on the input

  input[type="submit"] {
      background-color: red;
      color: #fff;
      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;
    }

And here's the fiddle too