使<i>标记为<input type =“button”/>的值

Question

我正在使用Font Awesome，并希望将其中一个简单<input type='button'>的图标设为值，例如<i class='fa fa-bold'></i>

然而，当我写：

<input id='bold' type='button'><i class='fa fa-bold'></i></input>

它呈现一个按钮，然后在其右边显示Font Awesome图标。 这不可能实现吗？

Answer 1

input元素为void elements：

  

无效元素：area，base，br，col，embed，hr，img，   input，keygen，link，meta，param，source，track，wbr

因此，他们没有内容：

  

Void elements无法获得任何内容（因为没有结束标记，没有   内容可以放在开始标记和结束标记之间。）

您只能通过value属性[source]在其中显示文字：

  

当输入按钮绑定应用于input元素时   其type属性位于[...] Button状态   预期元素将呈现为“内联块”＆＃39;框呈现为   按钮，大约一行高，包含元素的内容   value属性

如果要在按钮内呈现HTML元素，请使用button元素代替[source]：

  

当按钮绑定应用于button元素时，   预期元素将呈现为“内联块”＆＃39;框呈现为   按钮，其内容是元素的内容。

Answer 2

为什么不使用按钮标签呢？然后把

<i class='fa fa-bold'></i>

按钮标签内的

，如

<button id="bold"><i class='fa fa-bold'></i></button>

我认为输入元素是无效元素，因此它们没有内容。你可以通过css实现它，如果你坚持'。