Overview

Swap Font Awesome for modern Line Awesome Icons in one line of code and use with Metronic right away.

Ugage

Use Line Awesome icons with spesific class as explained in the Icons Preview Page:

<i class="las la-wallet"></i>
<i class="las la-highlighter"></i>
<i class="las la-calendar-alt"></i>
<i class="las la-comments"></i>
<i class="las la-file-code"></i>
<i class="las la-drafting-compass"></i>
<i class="las la-tags"></i>
<i class="las la-tools"></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="las la-tint text-white"></i>
<i class="las la-tint text-primary"></i>
<i class="las la-tint text-secondary"></i>
<i class="las la-tint text-light"></i>
<i class="las la-tint text-success"></i>
<i class="las la-tint text-info"></i>
<i class="las la-tint text-warning"></i>
<i class="las la-tint text-danger"></i>
<i class="las la-tint text-dark"></i>
<i class="las la-tint text-muted"></i>
<i class="las la-tint text-gray-100"></i>
<i class="las la-tint text-gray-200"></i>
<i class="las la-tint text-gray-300"></i>
<i class="las la-tint text-gray-400"></i>
<i class="las la-tint text-gray-500"></i>
<i class="las la-tint text-gray-600"></i>
<i class="las la-tint text-gray-700"></i>
<i class="las la-tint text-gray-800"></i>
<i class="las la-tint 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="las la-tint fs-5x"></i>
<i class="las la-tint fs-4x"></i>
<i class="las la-tint fs-3x"></i>
<i class="las la-tint fs-2tx"></i>
<i class="las la-tint fs-2hx"></i>
<i class="las la-tint fs-2qx"></i>
<i class="las la-tint fs-2x"></i>
<i class="las la-tint fs-1"></i>
<i class="las la-tint fs-2"></i>
<i class="las la-tint fs-3"></i>
<i class="las la-tint fs-5"></i>
<i class="las la-tint fs-6"></i>