CODEWITHSUNDEEP
htmlcssfont-awesome
sOltan
sOltan

Reputation: 493

Make Font Awesome icon a submit for a form

I'm trying to make a font awesome icon (empty square) clickable inside a form post. However, the code I tried showed the icon inside a button. I do not need the button, not the aesthetic I am looking for (see attached screenshot). Any thoughts? I am using this html code (showing the submit code only to keep it simple):

<!--input type="image" class="fa fa-square-o fa-lg" /-->
<button type="submit" id="completed-task">
      <i class="fa fa-square-o fa-lg"></i>
</button>

enter image description here

Upvotes: 10

Views: 16787

Answers (1)

66h3m3ab
66h3m3ab

Reputation: 1148

You can hide the button by taking away the border, background and padding;

<button type="submit" id="completed-task" class="fabutton">
      <i class="fa fa-square-o fa-lg"></i>
</button>

.fabutton {
  background: none;
  padding: 0px;
  border: none;
}


@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');

.fabutton {
  background: none;
  padding: 0px;
  border: none;
}
<button type="submit" id="completed-task" class="fabutton">
      <i class="fa fa-square-o fa-lg"></i>
</button>

Upvotes: 13

Related Questions