Components

## Icon Libraries

We've included few popular icon libraries into DashLite. It helps you to use easily.

Please Note: By default any of third-party icon library is not added globally, so if you want to use these icon library then please do not forgot to link. You will find uses information in very bottom of this page.

#### FontAwesome 5 Free

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
For a complete list of FontAwesome icons, please check FontAwesome Official Website

- heart Copied
- chart-bar Copied
- comment-dots Copied
- envelope-open Copied
- folder-open Copied
- hand-scissors Copied
- keyboard Copied
- object-ungroup Copied
- paper-plane Copied
- snowflake Copied
- star Copied
- facebook Copied

###### Code Example

    <em class="far fa-heart"></em>
    <em class="fas fa-star"></em>
    <em class="fab fa-facebook"></em>

#### Themify Icons

Themify Icons is a complete set of icons for use in web design and apps, hand-crafted icons that draw inspiration from Apple iOS 7.
For a complete list of Themify icons, please check Themify Official Website

- heart Copied
- comment-alt Copied
- camera Copied
- palette Copied
- truck Copied
- map-alt Copied
- headphone Copied
- basketball Copied
- vector Copied
- stamp Copied
- star Copied
- rocket Copied

###### Code Example

    <em class="ti ti-heart"></em>
    <em class="ti ti-star"></em>

#### Bootstrap Icons

Free, high quality, open source icon library from Bootstrap Team
For a complete list of Bootstrap icons, please check Bootstrap Official Website

- heart Copied
- alarm Copied
- camera Copied
- bar-chart-line Copied
- truck Copied
- basket Copied
- binoculars Copied
- bounding-box Copied
- braces Copied
- bug Copied
- star Copied
- chat-right-dots Copied

###### Code Example

    <em class="bi bi-heart"></em>
    <em class="bi bi-star"></em>

#### Uses Instruction

As Nioicon is our template default icon font so you will need take additional step as below to use third-party icon library.

###### Link into Head Tag

You can simply add `<link>` into `<head>` tag on each page as below reference.

`<!-- FontAwesome Icons -->
<link rel="stylesheet" type="text/css" href="./assets/css/libs/fontawesome-icons.css">
<!-- Themify Icons -->
<link rel="stylesheet" type="text/css" href="./assets/css/libs/themify-icons.css">
<!-- Bootstrap Icons -->
<link rel="stylesheet" type="text/css" href="./assets/css/libs/bootstrap-icons.css">`

###### Compile with SCSS

Alternatively, you can include globally from scss file to reduce request and load directly. So, you will need to edit the `/scss/vendor/bundle.scss` file and active relevant code block as below. You must need to re-complie scss file after any change made.

`// You just need to uncomment relavent library codes and recomplile.
//FontAwesome Icons
$fa-font-path: "../fonts";
@import "fontawesome/fontawesome.scss";
@import "fontawesome/brands.scss";
@import "fontawesome/regular.scss";
@import "fontawesome/solid.scss";
//Themify Icons
$ti-font-path : "../fonts";
@import "themify-icons/themify-icons";
//Bootstrap Icons
$bi-font-path : "../fonts";
@import "bootstrap-icons/bootstrap-icons";`