《bootstrap图标库_bootstrap图标库怎么用》
在网页开发中，想要便捷地使用美观的图标，Bootstrap图标库是一个很好的解决方案。它提供了丰富多样的图标，能够快速集成到基于Bootstrap框架的项目中，且使用简单、样式统一。
一、通过链接CDN使用
这是最简单的使用方式。在HTML文件的<head>标签内添加Bootstrap图标库的CDN链接，例如：
```html
然后就可以在页面中使用图标了。比如要在页面中显示一个搜索图标，代码如下：
```
二、下载并本地引用
如果担心网络问题影响图标加载，可以下载图标库到本地项目中使用。从Bootstrap图标库的官方网站下载字体文件等相关资源，解压后将其放置在项目的合适目录下，如/fonts/bootstrap - icons/。接着在CSS文件或者HTML文件的<style>标签中引入：
css
@font - face {
font - family: 'bootstrap - icons';
src: url('../fonts/bootstrap - icons/bootstrap - icons.woff2') format('woff2'),
url('../fonts/bootstrap - icons/bootstrap - icons.woff') format('woff');
}
.bi::before {
display: inline - block;
font - family: 'bootstrap - icons'!important;
font - style: normal;
font - weight: normal;
font - variant - numeric: tabular - nums;
line - height: 1;
text - transform: none;
vertical - align: -.125em;
-webkit - font - smoothing: antialiased;
-moz - osx - font - smoothing: grayscale;
}
之后同样可以用<i class="bi bi - 图标名称"></i>的方式在页面插入图标。
三、结合JavaScript动态操作
有时候需要根据用户的交互动态改变图标。例如，点击按钮切换播放和暂停图标。HTML部分：
html
<button id="playPauseBtn"><i class="bi bi-play - fill"></i></button>
JavaScript代码：
javascript
let playPauseBtn = document.getElementById('playPauseBtn');
let isPlaying = false;
playPauseBtn.addEventListener('click', function(){
if(isPlaying){
playPauseBtn.innerHTML = '<i class="bi bi-play - fill"></i>';
isPlaying = false;
}else{
playPauseBtn.innerHTML = '<i class="bi bi - pause - fill"></i>';
isPlaying = true;
}
});
以上就是Bootstrap图标库的一些常见使用方法，无论是静态展示还是动态交互场景都能满足需求。
