html - 语义 UI 标记的图标按钮类型的提交按钮

Question

我正在使用语义 UI 并尝试将图标添加到输入按钮类型提交

这是我的尝试：

<i class="sign in icon"></i>
<input type="submit" name="login-button" class="ui blue submit button" value="Login">

问题是图标显示在按钮前面而不是按钮内部。

使用 div 可以做到这一点：

<div id="login-button" class="ui blue submit labeled icon button">
    <i class="sign in icon"></i> Login
</div>

您知道将图标添加到按钮类型提交的任何方法吗？

Answer 1

<button type="submit" name="login-button" class="ui blue submit button">
  <i class="sign in icon"></i>
  Login
</button>

希望这可以帮助。

W3 关于按钮元素有这样的说法：

使用 BUTTON 元素创建的按钮功能与使用 INPUT 元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON 元素可能具有内容。例如，包含图像的 BUTTON 元素的功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素类型允许内容。