Overview

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.

Ugage

Use Font Awesome icons with spesific class as explained in the Icon Preview Page:

<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>

Icon Colors

The inline icons can be colored using .text-{color}class that defined with $theme-text-colorsvariable in sass/_variables.scss:

white

primary

secondary

light

success

info

warning

danger

dark

muted

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

<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>

Icon Sizes

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

.fs-5x

.fs-4x

.fs-3x

.fs-2tx

.fs-2hx

.fs-2qx

.fs-2x

.fs-1

.fs-2

.fs-3

.fs-5

.fs-6

<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>