CSS Awesome Font图标作为提交按钮

Question

我有一个提交按钮，如下所示：

<input type="submit" value="Submit" id="submitButton" />

而且我也有这个很棒的字体图标

<i class="fa fa-search"></i>

我尝试将类添加到“提交”按钮，但这没有用。

Answer 1

除非您习惯使用<input> ，否则使用<button>会使这变得容易得多，但是可以使用unicode版本的search并在&#x之前加上它：

 #submitButton { font-family: FontAwesome; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <input type="submit" value="&#xf002" id="submitButton"> <button id="submitButton"> <i class="fa fa-search"></i> </button> 

在Font Awesome网站上的图标下方可以找到任何Font Awesome图标的Unicode版本：

小提琴

Answer 2

使用按钮呢？

<button type="submit" value="Submit" id="submitButton" />
  <i class="fa fa-search"></i> Submit
</button>

Answer 3

您可以尝试以下操作-使用按钮代替输入和以下代码：

<button type="submit" id="submitButton">
    <i class="fa fa-search"></i> Submit
</button>