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>