We are using Remix icon library for icons.
Read the official
Remix Icon's
Documentation for a full list of instructions and other options.
Remix Icon is a simple yet beautifully created icons for designers and developers to use in your next project.
You can put this link below in the <head> section.
<link rel="stylesheet" href="../../assets/vendor/fonts/remixicon/remixicon.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css"/>Basic Usage
<i class="ri-focus-2-line ri-36px"></i>| Class | Value |
|---|---|
class="ri-{value}"
|
ICON_NAME |
Sizing
In need of a FAB button, but with light background colors? Replace the default modifier classes with the
.btn-label-*.
<i class="ri-arrow-up-line ri-48px"></i>
<i class="ri-arrow-up-line ri-36px"></i>
<i class="ri-arrow-up-line ri-24px"></i>
<i class="ri-arrow-up-line ri-20px"></i>
<i class="ri-arrow-up-line ri-18px"></i>
<i class="ri-arrow-up-line ri-14px"></i>| Class | Value |
|---|---|
class="ri-{value}"
|
14px |18px |20px | 24px | 36px | 48px |
Rotation & Flipping
In need of a FAB button, but not the hefty background colors they bring? Replace the default modifier
classes with the
.btn-outline-* ones to remove all background images and colors on
any button.
<i class="ri-thumb-up-fill ri-36px ri-rotate-45"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-90"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-135"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-180"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-225"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-270"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-315"></i>
<i class="ri-thumb-up-fill ri-36px ri-flip-v"></i>
<i class="ri-thumb-up-fill ri-36px ri-flip-h"></i>| Class | Value |
|---|---|
class="ri-{value}"
|
rotate-45 | rotate-90 | rotate-135 | rotate-180 | rotate-225 | rotate-270 | rotate-315 | flip-v | flip-h |
Border
<i class="ri-trophy-line border border-2 p-2 rounded ri-36px"></i>
<i class="ri-trophy-line border border-2 p-2 rounded-circle ri-36px"></i>| Class | Description |
|---|---|
class="border border-2"
|
Use utility classes of borders and padding. Use rounded class for rounded border and
use rounded-circle for circle.
|
Spin Animation
<i class="ri-loader-5-line ri-spin ri-36px"></i>| Class | Value |
|---|---|
class="ri-{value}"
|
spin |