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