Badges are a simple way to mark icons or make inline text highlightning.
The badge primarily is .badge class with different theming possibilities:
.badge-clean.badge-warning.badge-info.badge-danger.badge-succesCheckout the code example below, that shows how text and icons can be interchanged.
<span class="badge">Badge</span>
<span class="badge badge-clean"><i class="fa fa-bolt"></i></span>
<span class="badge badge-warning"><i class="fa fa-warning"></i></span>
<span class="badge badge-info"><i class="fa fa-info-circle"></i></span>
<span class="badge badge-danger"><i class="fa fa-close"></i></span>
<span class="badge badge-succes"><i class="fa fa-check"></i></span>
<br><br>
<span class="badge">Badges</span>
<span class="badge badge-clean">work</span>
<span class="badge badge-warning">with</span>
<span class="badge badge-info">text</span>
<span class="badge badge-danger">and</span>
<span class="badge badge-succes"><i class="fa fa-check"></i> icons</span>