CSS

Add Bootstrap Icons in SASS or SCSS

Bootstrap introduced their icons collection in November 2019 as Bootstrap Icons (v1.0.0-alpha). At that time, they had only 213 icons. As of January 2022, they’ve 1500+ icons in their library. You can use Bootstrap Icons with or without Bootstrap in any project.

To include Bootstrap Icons in a sass file is simple. You just have to make sure you used the correct font files’ location in $bootstrap-icons-font-src variable –
 

$bootstrap-icons-font-src: url("../webfonts/bootstrap-icons.woff2") format("woff2"),
url("../webfonts/bootstrap-icons.woff") format("woff");

@import "~bootstrap-icons/font/bootstrap-icons.scss";
S M Zahed Kamal

View Comments

  • I blog often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your site and keep checking for new information about once per week. I opted in for your Feed too.

Share
Published by
S M Zahed Kamal

Recent Posts

Open the side panel by default in google chrome extension

To open the side panel by default in google Chrome extension, you can use the…

10 months ago

PHP to remove unnecessary key and value pairs from any multi-dimensional array

Today I will share a snippet I've used in a project. Using that function, you…

3 years ago

Use vanilla JavaScript to make Ajax request

JavaScript AJAX (Asynchronous JavaScript and XML) is a technique that gives the ability to send…

4 years ago

Add animation to bootstrap carousel elements

By default, Bootstrap carousel has no way to add animations to carousel elements. Here I'm…

4 years ago

Create custom pagination template in Laravel

Laravel comes up with a paginator that generates HTML compatible with the Tailwind CSS framework.…

4 years ago

Create autocomplete using vanilla JavaScript

To create autocomplete feature for input field(s), HTML's datalist tag can be the easiest solution.…

4 years ago