如何将Font Awesome图标添加到<input>按钮中？

Question

我想在<input type="reset">中添加一个Font Awesome图标。

如果我使用超链接或按钮可以实现这一点，但如果我选择这种方法，我需要使用jQuery/JS来清除表单，而我目前正在尝试避免这样做。

我想知道是否有可能实现相同的结果。请查看JSFiddle以了解我的意思。

Input Reset:
<input type="reset" class="btn btn-warning" value=""><i class="fa fa-times"></i> Clear</input>

<br/>
<br/>

Button:
<button class="btn btn-warning"><i class="fa fa-times"></i> Clear</button>

<br/>
<br/>

Anchor:
<a href="#" class="btn btn-warning"><i class="fa fa-times"></i> Clear</a>

如果没有其他方法，我将实施一个jQuery解决方案。

- ZeroBased_IX

Answer 1

<input>是自闭合标签，不允许在其内部包含任何其他元素。

以下是三种以行内形式呈现图标的可能选项。

JsFiddle演示

1. 将<i>和<input>按钮包装在一个<span>标签中，并添加一些自定义样式。

<span class="btn btn-warning">
    <i class="fa fa-times"></i> <input type="reset" value="Clear"/>
</span>

span > i {
    color: white;
}
span > input {
    background: none;
    color: white;
    padding: 0;
    border: 0;
}

2. 使用<button type="reset"> - 推荐使用。

<button class="btn btn-warning" type="reset">
    <i class="fa fa-times"></i> Clear
</button>

3. 使用 <a> 锚标签 + JavaScript

<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
    <i class="fa fa-times"></i> Clear
</a>

- Stickers

Answer 2

https://jsfiddle.net/a6s58Luj/3/

<input type="reset" class="NEWCLASS btn btn-warning" value="&#xf00d; Clear" />

通过添加value=" Clear"，您可以添加X图标。f00d是我从检查元素（检查::before的内容）中获得的图标HEX/其他值。您可能需要查看一些附加样式，但它会起作用。只需记住设置字体即可。

- MortenMoulder

---

哦，你也不必使用我创建的NEWCLASS类。它只是为了与其他按钮区分开来。 - MortenMoulder

非常准确，谢谢。我只需要弄清楚如何在按钮上使用我的默认字体以及字体awesome字体。注意它已经剥离了样式。 - ZeroBased_IX

我也看到了同样的问题。不幸的是，我有99.9%的把握你做不到那个。你不能在一半文本中使用一种字体，在另一半中使用另一种字体。那样行不通。这是一种有趣的按钮类型，但我会毫不犹豫地用jQuery来实现它。 - MortenMoulder

这是非常聪明的做法，顺便确保测试FontAwesome字体是否会对显示普通文本造成任何其他问题。 - Stickers

是的。您可能希望将 font-family 更改为 font: normal normal normal 14px/1 FontAwesome;，就像原始代码中一样。 - MortenMoulder

是的，我做不到，决定采用jQuery解决方案。看起来更简洁。 - ZeroBased_IX

Answer 3

这对我有用，它结合了fa类和输入标记内的Unicode。

 <input type='button' class='btn btn-default fas fa-share-alt' style='background-color:white; color:black;' value='&#xf0c5; Copy' onclick='myFunctionCopy($x)'>

 </div>

- OsowoIAM

Answer 4

如果你需要在表单中使用这个，你不能使用type="reset"。

我认为最好的方法是，将输入元素包裹在标签中，并将所有的CSS应用到标签上。点击标签会触发输入元素。

<label classname="all css of your button">
   <input type="submit" value="submit">
   <i class="fa fa-times"></i>  
</label>

- Pranav M