We are using three different icon libraries for icons.
Read the official Font Awesome, Tabler Icons Documentations for a full list of instructions and other options.
Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.
We have already included tabler icons in template so you don't have to worry about including any files. Check below mentioned path to find tabler icons' location in your template.
<link rel="stylesheet" href="assets/vendor/fonts/tabler-icons.css" />Basic Usage
| Class | Value |
|---|---|
class="ti ti-{value}"
|
ICON_NAME |
Sizing
<i class="ti ti-thumb-up ti-xl"></i>
<i class="ti ti-thumb-up ti-lg"></i>
<i class="ti ti-thumb-up ti-md"></i>
<i class="ti ti-thumb-up ti-sm"></i>
<i class="ti ti-thumb-up ti-xs"></i>| Class | Value |
|---|---|
class="ti-{value}"
|
xs | sm | md | lg | xl |
Rotation & Flipping
<i class="ti ti-thumb-up rotate-90"></i>
<i class="ti ti-thumb-up rotate-180"></i>
<i class="ti ti-thumb-up rotate-270"></i>
<i class="ti ti-thumb-up scaleY-n1"></i>
<i class="ti ti-thumb-up scaleX-n1"></i>| Class | Value |
|---|---|
class="{value}"
|
rotate-90 | rotate-180 | rotate-270 | scaleY-n1 | scaleX-n1 |
Border
<i class="ti ti-trophy border border-2 p-2"></i>
<i class="ti ti-trophy border border-2 p-2 rounded-circle"></i>| Class | Description |
|---|---|
class="border border-2"
|
Use utility classes of borders and padding. Use rounded-circle class for rounded border.
|
Animations
<i class="ti ti-loader ti-spin"></i>
<i class="ti ti-belltitada"></i>
<i class="ti ti-alert-triangle ti-flashing"></i>
<i class="ti ti-circle ti-burst"></i>
<i class="ti ti-arrow-big-left ti-fade-left"></i>
<i class="ti ti-arrow-big-right ti-fade-right"></i>
<i class="ti ti-thumb-up ti-fade-up"></i>
<i class="ti ti-thumb-down ti-fade-down"></i>| Class | Value |
|---|---|
class="ti-{value}"
|
spin | tada | flashing | burst | fade-left | fade-right | fade-up | fade-down |
Hover Animations
<i class="ti ti-loader ti-spin-hover"></i>
<i class="ti ti-bell ti-tada-hover"></i>
<i class="ti ti-alert-triangle ti-flashing-hover"></i>
<i class="ti ti-circle ti-burst-hover"></i>
<i class="ti ti-arrow-big-left ti-fade-left-hover"></i>
<i class="ti ti-arrow-big-right ti-fade-right-hover"></i>
<i class="ti ti-thumb-up ti-fade-up-hover"></i>
<i class="ti ti-thumb-down ti-fade-down-hover"></i>| Class | Value |
|---|---|
class="ti-{value}"
|
spin-hover | tada-hover | flashing-hover | burst-hover | fade-left-hover | fade-right-hover | fade-up-hover | fade-down-hover |
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
We have already included Font Awesome in template so you don't have to worry about including any files. Check below mentioned path to find the location in your template.
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css" />Basic Usage
| Class | Value |
|---|---|
class="fa-{value}"
|
ICON_NAME |
Sizing
<i class="fab fa-odnoklassniki fa-10x"></i>
<i class="fab fa-odnoklassniki fa-7x"></i>
<i class="fab fa-odnoklassniki fa-5x"></i>
<i class="fab fa-odnoklassniki fa-3x"></i>
<i class="fab fa-odnoklassniki fa-2x"></i>
<i class="fab fa-odnoklassniki fa-lg"></i>
<i class="fab fa-odnoklassniki fa-sm"></i>
<i class="fab fa-odnoklassniki fa-xs"></i>| Class | Value |
|---|---|
class="fa-{value}"
|
xs | sm | lg | 2x | 3x | 5x | 7x | 10x |
Rotation & Flipping
<i class="fab fa-sticker-mule fa-rotate-90"></i>
<i class="fab fa-sticker-mule fa-rotate-180"></i>
<i class="fab fa-sticker-mule fa-rotate-270"></i>
<i class="fab fa-sticker-mule fa-flip-horizontal"></i>
<i class="fab fa-sticker-mule fa-flip-vertical"></i>
<i class="fab fa-sticker-mule fa-flip-both"></i>| Class | Value |
|---|---|
class="fa-{value}"
|
fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical | fa-flip-both |