Полностью заменить тип ввода = "кнопка" с иконкой

Question

Вот код. Конечно, для этого нужно сохранить весь функционал. Как можно этого достичь?

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

	This is how it looks right now:
	<input type='button' value='+' class='qtt' field='quantity' />
  
<br /><br />

	This is how I want it to look:
  <i class="fas fa-plus-square"></i>

Answer 1

Просто используйте тег button и настройте его CSS так, как вам нравится:

button {
  border: 0;
  padding: 0;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

<button type="button"><i class="fas fa-plus-square"></i></button>

Answer 2

Вы были почти там:

* {
  border: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

<button type="button"><i class="fas fa-plus-square" style="font-size:30px"></i></button>