Font awesome and bootstrap button with icons syntax

Question

In bootstrap, buttons with icons are implemented using a combination of <button> and <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>

In font awesome, buttons are implemented using combination of <a> and <i>:

http://fontawesome.io/examples/

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

Is there a better way? Or are the selection of these tags completely arbitrary?

Answer 1

It completely depends upon the usage.

In bootstrap you can implement buttons using combination of <a> and <i>. Similarly , in font-awesome buttons with icons can be implemented using a combination of <button> and <span>.

For example: If we need to submit a form and the submit button contains a font-awesome icon then we do it like this--

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

Another example: If we need to use a normal link and the link contains a bootstrap glyphicon icon then we can do it like this--

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