将Font Awesome图标设置为表单提交按钮

Question

我想让一个字体图标（空心正方形）在表单提交时可点击。但是，我尝试的代码显示了一个包含该图标的按钮。我不需要按钮，也不是我要寻找的美观效果（请参见附带的截图）。有什么想法吗？我正在使用以下HTML代码（仅显示提交代码以保持简单）：

<!--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>

- sOltan

Answer 1

您可以通过去除边框、背景和填充来隐藏按钮；

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

- Ieuan