How to use Bootstrap icons in your project?
There are two ways of using Bootstrap icons in your project as listed below:
Using Node Package Manager(NPM):
You can install Bootstrap icons in your current project directory using the below npm command.
npm install bootstrap-icons
Using the CDN Link:
You can also use the Bootstrap icons CSS CDN link in your HTML document to include Bootstrap icons in your project. The CDN link is given below.
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
Example: The below code will explain how you can use the CDN link to include Bootstrap icons in your project.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >AppendChild Example</ title > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" > < style > #container { text-align: center; } button { background-color: green; color: #fff; border: none; border-radius: 10px; padding: 15px; cursor: pointer; } </ style > </ head > < body > < div id = "container" > < h3 >Hey Geek,</ h3 > < h2 style = "color: green;" > Welcome to w3wiki!! </ h2 > < h4 > < i class = "bi bi-pc-display-horizontal" ></ i > A Computer science portal. < i class = "bi bi-laptop-fill" ></ i > </ h4 > < a target = "_blank" href = < button id = "btn" > Buy GFG Course < i class = "bi bi-bag-fill" ></ i > </ button > </ a > < p > < b > Fuel Your knowledge with GFG < i class = "bi bi-fuel-pump-fill" ></ i > </ b > </ p > </ div > </ body > </ html > |
Output:
Bootstrap Icons
Bootstrap Icons is an open-source Bootstrap library that is free and consists of over 2000 high-quality icons. You can include or use them in your HTML document to enhance the UI of your web page by using SVG, SVG sprites, or web fonts.