FontAwesome Before

by David Hepworth

HTML

<script src="https://use.fontawesome.com/7a239c9f77.js"></script>
<a href="javascript:;" class="btn btn-primary taxi">This is a test of the taxi class.</a>

<a href="javascript:;" class="btn btn-primary bus">This is a test of the bus class.</a>

CSS

body {
  font-family: helvetica, sans-serif;
  font-size: 2em;
  margin: .25em;
}

.btn {
  padding: .25em .5em;
  border-radius: .25em;
  clear: both;
  display: block;
  margin: .25em;
}

.btn.btn-primary {
  background: red;
  overflow: hidden;
}

a.btn {
  text-decoration: none;
  padding-left: 2.5em;
  position: relative;
}

a.btn.btn-primary {
  color: white;
}

a.btn.btn-primary:hover {
  background: firebrick;
}

.btn.taxi:before {
  content: '\f1ba';
}

.btn.bus:before {
  content: '\f207';
}

.btn:before {
  font-family: 'fontawesome';
  left: 1em;
  top: .35em;
  vertical-align: middle;
  position: absolute;
}
  
@media (max-width: 300px) {
  .btn:before {
    display: none;
    margin: 0;
    padding: 0;
  }
  a.btn {
    padding: .5em 1em;
  }
}