CSS Awesome Font图标作为提交按钮

Question

我有一个像这样的提交按钮：

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

我也有这个awesomefont图标

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

我尝试将该类添加到提交按钮，但这不起作用。

Answer 1

除非您已经开始使用<input>，否则使用<button>可以使这更容易，但可以使用unicode版本的搜索并在&#x前加上它：

＆＃13;

＆＃13;

#submitButton {
  font-family: FontAwesome;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Fiddle

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>