📅 最后修改于: 2023-12-03 15:14:17.786000 🧑 作者: Mango
Bootstrap Icons is a free, open-source icon library that can be used with Bootstrap 4 and 5. It has over 1,500 icons to choose from, making it a popular choice for web developers and designers.
The easiest way to use Bootstrap Icons in your project is by using the CDN. A CDN (Content Delivery Network) allows you to use an external source for your website's assets, such as CSS and JS files, images and icons. This means that instead of hosting these assets on your server, you can rely on a dedicated service to deliver them to your visitors.
To use Bootstrap Icons CDN, you need to add the following link to the <head> section of your HTML file:
<link href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" rel="stylesheet">
This link tells the browser to load the Bootstrap Icons CSS file from the CDN. You can also change the link to load a different set of icons, such as the filled icons or the two-tone icons.
Once the Bootstrap Icons CSS file is loaded, you can start using the icons in your HTML code. Here's an example of how to use the "heart" icon:
<span class="bi bi-heart"></span>
In this code, we're using the bi class to define the Bootstrap Icons font family, and the bi-heart class to define the specific icon we want to use. You can find the class names for all the available icons in the Bootstrap Icons documentation.
Using CSS Bootstrap Icons CDN is a simple and efficient way to add icons to your website. By relying on an external source for your icons, you can save time and reduce the load on your server. Plus, with over 1,500 icons to choose from, Bootstrap Icons offers a wide variety of options to enhance your website's design and functionality.