用图标完全替换 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 {&nbsp; border: 0;&nbsp; padding: 0;&nbsp; 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

你就快到了：* {&nbsp; border: 0;&nbsp; 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>