Usando Font Awesome

by Tiago Agostinho

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i class="fa fa-bars"></i>

<br><br>

<div class="face-before">
  o ícone do facebook vai aparecer a esquerda (before = antes)
</div>

<br>

<div class="face-after">
  o ícone do facebook vai aparecer a direita (after = depois)
</div>

CSS

.face-before:before { 
  content: "\f230"; 
  font-family: FontAwesome;
}

.face-after:after { 
  content: "\f230"; 
  font-family: FontAwesome;
}