html - CSS Awesome 字体图标作为提交按钮

Question

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

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

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

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

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

Answer 1

除非您坚决使用 <input> , 使用 <button>使这更容易一些，但可以使用 unicode 版本的搜索并在其前面加上 &#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 图标的 Unicode 版本都可以在 Font Awesome site 上的图标下方找到:

Fiddle