Show Credit Card Type Icon?

Question

I have this HTML code - Linked to this JS code which is used to identify the type of credit card

This function uses the parseCardType method to return the credit card name by number (visa, mastercard, amex). I would like to see the Fontawesome icon of the card shown within the ct span instead of the name. Is there any way to do this?

function updateType(e) {
  var cardType = payform.parseCardType(e.target.value);
  type.innerHTML = cardType || 'invalid';
}

<div class="row">
  <div class="col-sm-12">
    <div class="form-group">
      <label for="ccnumber">Numero della carta</label>
      <div class="input-group">
        <input class="form-control" type="text" id="ccnum" placeholder="0000 0000 0000 0000" autocomplete="cc-number">
        <div class="input-group-append">
          <span id="ct" class="input-group-text">
                                            </span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Is it Bootstrap? If so, try something like this:

type.innerHTML = `<i class="fa-cc-${cardType}"></i>` || 'invalid';