We are using three different icon libraries for icons.
Read the official Font Awesome, Boxicons, Documentations for a full list of instructions and other options.
Boxicons is a simple vector icons set carefully crafted for designers and developers to use in your next project.
We have already included boxicons in template so you don't have to worry about including any files. Check below mentioned path to find boxicons' location in your template.
<link rel="stylesheet" href="assets/vendor/fonts/boxicons.css" />Basic Usage
| Class | Value |
|---|---|
class="bx bx-{value}"
|
ICON_NAME |
Sizing
<i class="bx bx-upvote bx-lg"></i>
<i class="bx bx-upvote bx-md"></i>
<i class="bx bx-upvote bx-sm"></i>
<i class="bx bx-upvote bx-xs"></i>| Class | Value |
|---|---|
class="bx-{value}"
|
xs | sm | md | lg |
Rotation & Flipping
<i class="bx bx-crown bx-rotate-90"></i>
<i class="bx bx-crown bx-rotate-180"></i>
<i class="bx bx-crown bx-rotate-270"></i>
<i class="bx bx-crown bx-flip-vertical"></i>
<i class="bx bx-crown bx-flip-horizontal"></i>| Class | Value |
|---|---|
class="bx-{value}"
|
rotate-90 | rotate-180 | rotate-270 | flip-horizontal | flip-vertical |
Border
| Class | Value |
|---|---|
class="bx-{value}"
|
border | border-circle |
Animations
<i class="bx bx-loader bx-spin"></i>
<i class="bx bxs-bell bx-tada"></i>
<i class="bx bx-error bx-flashing"></i>
<i class="bx bx-radio-circle bx-burst"></i>
<i class="bx bx-left-arrow-circle bx-fade-left"></i>
<i class="bx bx-right-arrow-circle bx-fade-right"></i>
<i class="bx bx-upvote bx-fade-up"></i>
<i class="bx bx-downvote bx-fade-down"></i>| Class | Value |
|---|---|
class="bx-{value}"
|
spin | tada | flashing | burst | fade-left | fade-right | fade-up | fade-down |
Hover Animations
<i class="bx bx-loader bx-spin-hover"></i>
<i class="bx bx-bell bx-tada-hover"></i>
<i class="bx bx-error bx-flashing-hover"></i>
<i class="bx bx-radio-circle bx-burst-hover"></i>
<i class="bx bx-left-arrow-circle bx-fade-left-hover"></i>
<i class="bx bx-right-arrow-circle bx-fade-right-hover"></i>
<i class="bx bx-upvote bx-fade-up-hover"></i>
<i class="bx bx-downvote bx-fade-down-hover"></i>| Class | Value |
|---|---|
class="bx-{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 |