Font awesome and bootstrap button with icons syntax

Another example using <i> tag.

<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>

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>