WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

ICON LISTS

  1. Home
  2. Shortcodes
  3. Icon Lists
You can use any icon from Features
  • Available Item 1
  • Available Item 2
  • Available Item 3
  • Available Item 4
  • Available Item 5
  • Unavailable Item 1
  • Unavailable Item 2
  • Unavailable Item 3
  • Unavailable Item 4
  • Unavailable Item 5
  • Warning Item 1
  • Warning Item 2
  • Warning Item 3
  • Warning Item 4
  • Warning Item 5
  • Info Item 1
  • Info Item 2
  • Info Item 3
  • Info Item 4
  • Info Item 5
Show Code 
<!--
	Available icon colors:
		text-success
		text-warning
		text-danger
		text-info
-->
<div class="row">

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-check text-success"></i> Available Item 1</li>
			<li><i class="fa fa-check text-success"></i> Available Item 2</li>
			<li><i class="fa fa-check text-success"></i> Available Item 3</li>
			<li><i class="fa fa-check text-success"></i> Available Item 4</li>
			<li><i class="fa fa-check text-success"></i> Available Item 5</li>
		</ul>
	</div>

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-remove text-danger"></i> Unavailable Item 1</li>
			<li><i class="fa fa-remove text-danger"></i> Unavailable Item 2</li>
			<li><i class="fa fa-remove text-danger"></i> Unavailable Item 3</li>
			<li><i class="fa fa-remove text-danger"></i> Unavailable Item 4</li>
			<li><i class="fa fa-remove text-danger"></i> Unavailable Item 5</li>
		</ul>
	</div>

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-warning text-warning"></i> Warning Item 1</li>
			<li><i class="fa fa-warning text-warning"></i> Warning Item 2</li>
			<li><i class="fa fa-warning text-warning"></i> Warning Item 3</li>
			<li><i class="fa fa-warning text-warning"></i> Warning Item 4</li>
			<li><i class="fa fa-warning text-warning"></i> Warning Item 5</li>
		</ul>
	</div>

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-info-circle text-info"></i> Info Item 1</li>
			<li><i class="fa fa-info-circle text-info"></i> Info Item 2</li>
			<li><i class="fa fa-info-circle text-info"></i> Info Item 3</li>
			<li><i class="fa fa-info-circle text-info"></i> Info Item 4</li>
			<li><i class="fa fa-info-circle text-info"></i> Info Item 5</li>
		</ul>
	</div>

</div>
  • Available Item 1
  • Available Item 2
  • Available Item 3
  • Available Item 4
  • Available Item 5
  • Unavailable Item 1
  • Unavailable Item 2
  • Unavailable Item 3
  • Unavailable Item 4
  • Unavailable Item 5
  • Warning Item 1
  • Warning Item 2
  • Warning Item 3
  • Warning Item 4
  • Warning Item 5
  • Info Item 1
  • Info Item 2
  • Info Item 3
  • Info Item 4
  • Info Item 5
Show Code 
<div class="row">

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-check"></i> Available Item 1</li>
			<li><i class="fa fa-check"></i> Available Item 2</li>
			<li><i class="fa fa-check"></i> Available Item 3</li>
			<li><i class="fa fa-check"></i> Available Item 4</li>
			<li><i class="fa fa-check"></i> Available Item 5</li>
		</ul>
	</div>

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-remove"></i> Unavailable Item 1</li>
			<li><i class="fa fa-remove"></i> Unavailable Item 2</li>
			<li><i class="fa fa-remove"></i> Unavailable Item 3</li>
			<li><i class="fa fa-remove"></i> Unavailable Item 4</li>
			<li><i class="fa fa-remove"></i> Unavailable Item 5</li>
		</ul>
	</div>

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-warning"></i> Warning Item 1</li>
			<li><i class="fa fa-warning"></i> Warning Item 2</li>
			<li><i class="fa fa-warning"></i> Warning Item 3</li>
			<li><i class="fa fa-warning"></i> Warning Item 4</li>
			<li><i class="fa fa-warning"></i> Warning Item 5</li>
		</ul>
	</div>

	<div class="col-md-3">
		<ul class="list-unstyled list-icons">
			<li><i class="fa fa-info-circle"></i> Info Item 1</li>
			<li><i class="fa fa-info-circle"></i> Info Item 2</li>
			<li><i class="fa fa-info-circle"></i> Info Item 3</li>
			<li><i class="fa fa-info-circle"></i> Info Item 4</li>
			<li><i class="fa fa-info-circle"></i> Info Item 5</li>
		</ul>
	</div>

</div>