Line Awesome

Overview

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

Usage

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>

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

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

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>