Bootstrap are icons are free and opensource library with more than 1000 icons. It provides SVG and web fonts to add into applications.
These can be used with or without bootstrap css.
This course covers complete bootstrap icons with css class. It also includes how to include bootstrap icons in html and javascript applications.
Latest version is 1.72 with more than 1500 free icons.
It provides icon asset kit to use in web and desktops applications.
We can cover the following things
- What is bootstrap icons?
What is bootstrap Icons?
Bootstrap icons are open source free high quality icon library
It is one of popular icon library with star ratings in Github Bootstrap icons are used with or without bootstrap css. We can add svg, SVG spring and web fonts to any html pag
Bootstrap icon advantages
Bootstrap icons are high quality icons which provides multiple ways to integrate into application using web fonts, svg, svg sprite and image .
- Open source high quality icons
- Easy and simple to use
- Loading time is very good as including single one CSS file in application
- Icons can be customized using CSS styles
How to use bootstrap icons?
bootstrap icons with inline elements or css styles
Where can find bootstrap icons?
Bootstrap has different versions
Bootstrap v3 has glyphicons icons
How to use bootstrap icons in an Application
using webfonts
svg
svg sprite
image
Is it possible to @import bootstrap icons in the scss file?
Bootstrap icons shipped with npm and cdn as css link.
Here is bootstrap css path in bootstrap icons node_modules
bootstrap-icons/font/bootstrap-icons.css
It is possible to import css path into SASS or SCS files using css @import
@import "~bootstrap-icons/font/bootstrap-icons.css";
~ represents an folder node_modules in application Application can be Angular , React and Vuejs
The same can be write as follows
@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";