Button Icons

Add a font-awesome icon before button text.

by bvotcode

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--FA unicodes here: http://astronautweb.co/snippet/font-awesome/-->
<h4>Buttons with text</h4>
<button class="btn cancel btn-default">Close</button>
<button class="btn add btn-primary">Add</button>
<button class="btn add btn-success">Insert</button>
<button class="btn save btn-primary">Save</button>
<button class="btn save btn-warning">Submit Changes</button>
<button class="btn cancel btn-link">Delete</button>
<button class="btn edit btn-info">Edit</button>
<button class="btn edit btn-danger">Modify</button>

<br/>
<br/>
<h4>Buttons without text</h4>
<button class="btn edit btn-primary" />
<button class="btn cancel btn-danger" />
<button class="btn add btn-info" />
<button class="btn save btn-success" />
<button class="btn edit btn-link"/>
<button class="btn cancel btn-link"/>

CSS

button.btn.add::before {
  font-family: fontAwesome;
  content: "\f067\00a0";
}

button.btn.edit::before {
  font-family: fontAwesome;
  content: "\f044\00a0";
}

button.btn.save::before {
  font-family: fontAwesome;
  content: "\f00c\00a0";
}

button.btn.cancel::before {
  font-family: fontAwesome;
  content: "\f00d\00a0";
}

button.btn.cancel::before{
  font-family: fontAsesome;
  content: "\f1f8\00a0"
}