Elements


These modular elements can be readily used and customized across pages and in different blocks.


	<!-- Plain Extra Small Icons: -->
	<span class="icon-v1 icon-xs mr-2 mb-2">
		<i class="fa fa-user"></i>
	</span>

	<!-- Bordered Extra Small Icon: -->
	<span class="icon-v2 icon-xs mr-3 mb-3">
		<i class="fa fa-user"></i>
	</span>

	<!-- Backgrounded Extra Small Icons -->
	<span class="icon-v3 icon-xs mr-3 mb-3">
		<i class="fa fa-user"></i>
	</span>

	<!-- Backgrounded & Bordered Extra Small Icons -->
	<span class="icon-v4-inner">
		<i class="fa fa-user"></i>
	</span>

							
How to use
  • Four available icon styles and For each different icon style there is different classes as shown in example code like .icon-v1, .icon-v2
  • Icon sizes are defined by diffrecnt size class like .icon-xs for extra small icon. You also can use your own classes and define icon size
  • Icon styles are not depended on size classes

Plain Icons xs:

Bordered Icons xs:

Backgrounded Icons xs:

Backgrounded & Bordered Icons xs:

Small size icon styles

Plain Icons sm:

Bordered Icons sm:

Backgrounded Icons sm:

Backgrounded & Bordered Icons sm: