用图标完全替换 input type="button"

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>