字体真棒和引导按钮与图标语法

Question

在自举,以图标按钮正在使用的组合来实现<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>

在字体很棒,按钮是使用<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>

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

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

Answer 2

另一个使用<i>标签的例子。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button  class="btn btn-warning">
    <i class="fa fa-trash-o fa-lg"></i>
</button>
    
<button  class="btn btn-primary">
    <i class="fa fa-trash-o fa-lg"></i> Delete
</button>

<button  class="btn btn-danger">
    Delete <i class="fa fa-trash-o fa-lg"></i> 
</button>