Bootstrap:图标库的安装及其使用

一、安装

使用npm包管理器安装。

npm i bootstrap-icons 

 二、使用图标

首先先引入bootstrap-icons.css库,然后从官方网站选择想要的图标然后复制使用代码。

 示例代码:使用vue引入对应css文件后,使用库图标。

<script setup>
  import "bootstrap-css/bootstrap.css"
  import "bootstrap-icons/bootstrap-icons.css"
</script>
<template>
   <span class="bi bi-webcam-fill"></span>
</template>
<style scoped>
  
</style>

参考资料: 

Bootstrap 图标库 · Bootstrap 官方开源图标(icon)库

### 如何使用 Bootstrap 图标库 Bootstrap Icons 是一个官方提供的高质量 SVG 图标集,旨在与 Bootstrap 框架无缝集成。为了有效利用这一资源,在项目中引入和配置图标库至关重要。 #### 引入 Bootstrap Icons 可以通过多种方式将 Bootstrap Icons 添加到项目中: - **CDN 方式**:最简单的方法是通过 CDN 链接直接在 HTML 文件头部引入[^1]。 ```html <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> ``` - **下载安装**:也可以从 GitHub 下载整个包或将它作为 npm 或 yarn 包来管理[^2]。 对于 npm 用户来说: ```bash npm install bootstrap-icons ``` 对于 yarn 用户而言,则执行如下命令: ```bash yarn add bootstrap-icons ``` 完成上述任一操作之后,记得把 `bootstrap-icons.css` 文件链接至项目的样式表中以便正常使用图标功能[^3]。 #### 使用图标 一旦成功加载了 Bootstrap Icons 的 CSS 文件,就可以轻松地在页面上显示所需图标HTML 元素内添加对应的 class 名字。例如要插入一个心形图标,只需这样做即可[^4]: ```html <i class="bi bi-heart"></i> ``` 这里的前缀 "bi-" 表示这是来自 Bootstrap Icons 库中的图标;而后面的 “heart” 则指定了具体想要使用的那个特定图形——在这个例子中就是一颗爱心形状的图案。 此外还有更多自定义选项可用于调整大小、颜色等属性,这取决于个人需求以及所采用的技术栈特性[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值