用图标完全替换 input type=“button”

Question

Here is the code. Of course, it needs to keep all the functionality. How could one achieve that?

 <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

Just use the button tag and adjust its CSS as you like:

 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

You were almost there:

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