当前位置: 首页 > news >正文

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)库

http://www.dtcms.com/a/60400.html

相关文章:

  • spring boot和spring cloud的区别
  • 【0016】Python数据类型-不可变集合详解
  • Retouch Pro 3.2.0汉化版深度解析:AI智能人像修图新利器
  • 开源许可证通俗、简洁介绍
  • K8s 1.27.1 实战系列(八)Service
  • 5G基本概念
  • fiddler+雷电模拟器(安卓9)+https配置
  • 计算机网络--访问一个网页的全过程
  • 从Manus看网络安全:通用AI智能体重构安全运营
  • gdb调试以及常用相关工具(hexdump\objdump等)
  • Node.js与VUE安装
  • 化工厂防爆气象站:为石油化工、天然气等领域提供安全保障
  • 在 Axios 中设置代理
  • BGP实验(一)IBGP全互联配置
  • Android TCP封装工具类
  • 【Linux docker】关于Docker 守护程序配置远程访问,安全认证以及idea连接。
  • 高效获取历史行情数据:xtquant的实战应用
  • SpringCloud——CircuitBreaker断路器
  • 电脑维修保养售后服务跟踪软件到哪里下载,佳易王电脑保养维护记录查询可导入图片管理系统操作教程
  • 无法打开包括文件: “QGLWidget”: No such file or directory
  • 位运算操作符(移位操作符)
  • 【3DMAX插件】3DMAX建筑大师插件MasterBuilder使用方法
  • Java/Kotlin逆向基础与Smali语法精解
  • 十分钟临时邮箱服务源码带api
  • pytest数据库测试文章推荐
  • DICOM医学影像脱敏技术应用的重要性及其实现方法详解
  • 命名管道的创建和通信实现
  • cesium地图设置3d,2d,2.5d动态切换
  • 企业员工薪酬关系系统的设计与实现(代码+数据库+LW)
  • 全球首款 5G-A 人形机器人发布