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