twitter-bootstrap-3 - 带有图标语法的 Font Awesome 和引导按钮

Question

在 Bootstrap 中，带有图标的按钮是使用 <button> 的组合来实现的。和 <span> :

http://getbootstrap.com/components/#glyphicons-examples

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

在 font awesome 中，按钮是使用 <a> 的组合来实现的。和 <i> :

http://fontawesome.io/examples/

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>

有没有更好的办法？还是这些标签的选择完全是任意的？

Answer 1

这完全取决于使用情况。

在 Bootstrap 中，您可以使用 <a> 的组合来实现按钮和 <i> .类似地，字体很棒的带有图标的按钮可以使用 <button> 的组合来实现。和 <span> .

例如:如果我们需要提交一个表单并且提交按钮包含一个很棒的字体图标，那么我们可以这样做——

<button type="button" class="btn btn-default" aria-label="Left Align">
 <span class="fa fa-trash-o fa-lg" aria-hidden="true"></span>
 </button>

另一个例子:如果我们需要使用普通链接并且链接包含引导 glyphicon 图标，那么我们可以这样做——

<a class="btn btn-danger" href="#">
 <i class="glyphicon glyphicon-align-left"></i> Delete</a>