Get vector icons and social logos on your website with
										
Font Awesome , the web's most popular icon set and toolkit. Font Awesome Free package included in Metronic and can be used right away by browsing the
										
Free Font Awesome Icons .
 
									
									
									
										
										
										 
										
										
										
										
										
										
										
										
										
											
											
												copy 
												
													
<i class="fas fa-envelope-open-tex"></i>
<i class="fab fa-affiliatetheme"></i>
<i class="fas fa-mail-bulk"></i>
<i class="fas fa-coins"></i>
<i class="fas fa-chart-pie"></i>
<i class="fas fa-percentage"></i>
<i class="fas fa-print"></i>
<i class="fas fa-pen-nib"></i>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										The inline icons can be colored using
										.text-{color}class that defined with
										$theme-text-colorsvariable in
										sass/_variables.scss:
										
										
										
										
										
										
											
											
												copy 
												
													
<i class="far fa-lightbulb text-white"></i>
<i class="far fa-lightbulb text-primary"></i>
<i class="far fa-lightbulb text-secondary"></i>
<i class="far fa-lightbulb text-light"></i>
<i class="far fa-lightbulb text-success"></i>
<i class="far fa-lightbulb text-info"></i>
<i class="far fa-lightbulb text-warning"></i>
<i class="far fa-lightbulb text-danger"></i>
<i class="far fa-lightbulb text-dark"></i>
<i class="far fa-lightbulb text-muted"></i>
<i class="far fa-lightbulb text-gray-100"></i>
<i class="far fa-lightbulb text-gray-200"></i>
<i class="far fa-lightbulb text-gray-300"></i>
<i class="far fa-lightbulb text-gray-400"></i>
<i class="far fa-lightbulb text-gray-500"></i>
<i class="far fa-lightbulb text-gray-600"></i>
<i class="far fa-lightbulb text-gray-700"></i>
<i class="far fa-lightbulb text-gray-800"></i>
<i class="far fa-lightbulb text-gray-900"></i>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										The font icons can be sized using
										.fs-{size}class that defined with
										$font-sizesvariable in
										sass/_variables.scss
										
										
										Where
										
sizeis one of:
										
											
											1- sets icon size that equals to
											<h1>font size 
											
											2- sets icon size that equals to
											<h2>font size 
											
											3- sets icon size that equals to
											<h3>font size 
											
											4- sets icon size that equals to
											<h4>font size 
											
											5- sets icon size that equals to
											<h5>font size 
											
											6- sets icon size that equals to
											<h6>font size 
											
											7- sets icon size that equals to
											<h7>font size 
											
											7- sets icon size that equals to
											0.95 of $font-size-basewhere
											$font-size-base: 1rem 
											
											8- sets icon size that equals to
											0.85 of $font-size-basewhere
											$font-size-base: 1rem 
											
											9- sets icon size that equals to
											0.75 of $font-size-basewhere
											$font-size-base: 1rem 
											
											10- sets icon size that equals to
											0.5 of $font-size-basewhere
											$font-size-base: 1rem 
											
											base- sets icon size that equals to
											$font-size-basewhere
											$font-size-base: 1rem 
											
											fluid- sets icon size that equals to
											100% 
											
											2x- sets icon size that equals to
											2 of $font-size-basewhere
											$font-size-base: 1rem 
											
											2qx- sets icon size that equals to
											2.25 of $font-size-basewhere
											$font-size-base: 1rem 
											
											2hx- sets icon size that equals to
											2.5 of $font-size-basewhere
											$font-size-base: 1rem 
											
											2tx- sets icon size that equals to
											2.75 of $font-size-basewhere
											$font-size-base: 1rem 
											
											3x- sets icon size that equals to
											3 of $font-size-basewhere
											$font-size-base: 1rem 
											
											3qx- sets icon size that equals to
											3.25 of $font-size-basewhere
											$font-size-base: 1rem 
											
											3hx- sets icon size that equals to
											3.5 of $font-size-basewhere
											$font-size-base: 1rem 
											
											3tx- sets icon size that equals to
											3.75 of $font-size-basewhere
											$font-size-base: 1rem 
											
											4x- sets icon size that equals to
											4 of $font-size-basewhere
											$font-size-base: 1rem 
											
											4qx- sets icon size that equals to
											4.25 of $font-size-basewhere
											$font-size-base: 1rem 
											
											4hx- sets icon size that equals to
											4.5 of $font-size-basewhere
											$font-size-base: 1rem 
											
											4tx- sets icon size that equals to
											4.75 of $font-size-basewhere
											$font-size-base: 1rem 
											
											5x- sets icon size that equals to
											5 of $font-size-basewhere
											$font-size-base: 1rem 
											
											5qx- sets icon size that equals to
											5.25 of $font-size-basewhere
											$font-size-base: 1rem 
											
											5hx- sets icon size that equals to
											5.5 of $font-size-basewhere
											$font-size-base: 1rem 
											
											5tx- sets icon size that equals to
											5.75 of $font-size-basewhere
											$font-size-base: 1rem 
										 
											
											
												copy 
												
													
<i class="far fa-lightbulb fs-5x"></i>
<i class="far fa-lightbulb fs-4x"></i>
<i class="far fa-lightbulb fs-3x"></i>
<i class="far fa-lightbulb fs-2tx"></i>
<i class="far fa-lightbulb fs-2hx"></i>
<i class="far fa-lightbulb fs-2qx"></i>
<i class="far fa-lightbulb fs-2x"></i>
<i class="far fa-lightbulb fs-1"></i>
<i class="far fa-lightbulb fs-2"></i>
<i class="far fa-lightbulb fs-3"></i>
<i class="far fa-lightbulb fs-5"></i>
<i class="far fa-lightbulb fs-6"></i>