CODEWITHSUNDEEP
htmlcss
Ant
Ant

Reputation: 141

Completely replace input type="button" with an icon

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>

Upvotes: 0

Views: 609

Answers (2)

Manjuboyz
Manjuboyz

Reputation: 7066

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>

Upvotes: 1

GalAbra
GalAbra

Reputation: 5138

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>

Upvotes: 2

Related Questions