Badges

Famous UI badges have fixed font size of 16px, use .fui-badge-lg for large badge and use .fui-badge-sm for small badge.

Normal Badges

Badge primary secondary success warning danger dark 
<span class="fui-badge">Badge</span>
	<span class="fui-badge primary">primary</span>
	<span class="fui-badge secondary">secondary</span>
	<span class="fui-badge success">success</span>
	<span class="fui-badge warning">warning</span>
	<span class="fui-badge danger">danger</span>
	<span class="fui-badge dark">dark</span>

Small Badges

Badge primary secondary success warning danger dark 
<span class="fui-badge fui-badge-sm">Badge</span>
	<span class="fui-badge fui-badge-sm primary">primary</span>
	<span class="fui-badge fui-badge-sm secondary">secondary</span>
	<span class="fui-badge fui-badge-sm success">success</span>
	<span class="fui-badge fui-badge-sm warning">warning</span>
	<span class="fui-badge fui-badge-sm danger">danger</span>
	<span class="fui-badge fui-badge-sm dark">dark</span>

Large Badges

Badge primary secondary success warning danger dark 
<span class="fui-badge fui-badge-lg">Badge</span>
	<span class="fui-badge fui-badge-lg primary">primary</span>
	<span class="fui-badge fui-badge-lg secondary">secondary</span>
	<span class="fui-badge fui-badge-lg success">success</span>
	<span class="fui-badge fui-badge-lg warning">warning</span>
	<span class="fui-badge fui-badge-lg danger">danger</span>
	<span class="fui-badge fui-badge-lg dark">dark</span>

Rounded Badges

Badge primary secondary success warning danger dark 
<span class="fui-badge rounded">Badge</span>
	<span class="fui-badge rounded primary">primary</span>
	<span class="fui-badge rounded secondary">secondary</span>
	<span class="fui-badge rounded success">success</span>
	<span class="fui-badge rounded warning">warning</span>
	<span class="fui-badge rounded danger">danger</span>
	<span class="fui-badge rounded dark">dark</span>

Badge Icons

Simple add .fui-badge-icon class to the badge
available size { Normal size | fui-badge-sm | fui-badge-lg } 





<!-- SMALL -->
	<a href="#" class="fui-badge fui-badge-icon fui-badge-sm primary">
	    <i class="fa fa-twitter"></i>
	</a>

	<!-- REGULAR -->
	<a href="#" class="fui-badge fui-badge-icon info">
	    <i class="fa fa-facebook"></i>
	</a>

	<!-- LARGE -->
	<a href="#" class="fui-badge fui-badge-icon fui-badge-lg secondary">
	    <i class="fa fa-instagram"></i>
	</a>