【Bootstrap学习 day11】

Bootstrap5字体图标

字体图标是在Web项目中使用的图标字体。
使用字体图标的好处是，可以通过应用CSS color属性来创建任何颜色的图标。此外，要更改图标的大小，只需使用CSS font-size属性即可。
获取字体图标
在网页中包含Bootstrap5图标的最简单方法是使用CDN链接。此CDN链接基本上指向一个远程CSS文件，其中包含生成字体图标所需的所有类。
在这里插入图片描述

我们可以在Bootstrap模板以及简单的网页中包含Bootstrap图标，而无需使用Bootstrap框架。利用提供的公共CDN服务并将图标字体的样式表添加到网站的<head>标签内。
在这里插入图片描述

步骤一：在HTML文档的<head>部分包含下面的Bootstrap CDN链接。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

步骤二：要将图标放置到网页中，使用语法<i class="bi-"></i>，其中代表特定图标的类名。

<i class="bi bi-wechat"></i>

在这里插入图片描述
向图标应用字体样式以更改颜色/大小等

<i class="bi bi-wechat fs-1 text-success"></i>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/298075.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

opencv图像金字塔

opencv图像金字塔

下采样&#xff1a; #include <opencv2/opencv.hpp> #include <iostream>int main() {// 读取图像cv::Mat src cv::imread("C:/Users/10623/Pictures/adf4d0d56444414cbeb809f0933b9214.png");if (src.empty()) {std::cout << "无法加载图像…
阅读更多...
【非关系型数据库】Redis概述及安装、命令使用

【非关系型数据库】Redis概述及安装、命令使用

目录 前瞻 关系型数据库 非关系型数据库 关系型数据库和非关系型数据库区别 数据存储方式不同 扩展方式不同 对事务性的支持不同 非关系型数据库产生背景 总结 Redis简介 什么是Redis Redis具有的优点 Redis使用场景 哪些数据适合放入缓存中&#xff1f; Redis为什…
阅读更多...
nodejs01

nodejs01

nodejs作用 Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时环境&#xff0c;允许开发人员在浏览器之外编写命令行工具和服务器端脚本. 是javascript的一个运行环境&#xff0c;&#xff0c;&#xff0c; nodejs stream 是前端工程化的基础 nodejs可以作为中间层&…
阅读更多...
南金研小巧的CAN总线记录仪在冬测中的使用

南金研小巧的CAN总线记录仪在冬测中的使用

南金研小巧的CAN总线记录仪在冬测中的使用&#xff1a; 在这里插入图片描述 1.确定需求&#xff1a;在开始使用前&#xff0c;需要明确冬测的具体需求&#xff0c;例如需要记录的CAN总线数据类型、采样率、存储容量等。 2.连接硬件&#xff1a;将小巧的CAN总线记录仪与需要进行…
阅读更多...
年终总结——平凡又不平凡的2023

年终总结——平凡又不平凡的2023

前言 总结不知道该如何写起&#xff0c;也不知该如何建立这一篇文章的大致框架&#xff0c;只知道我的2023大概也就分成两大块罢了。说起2023一整年&#xff0c;只能用平凡而又不平凡来形容&#xff0c;平凡在我依旧没有什么太突出的技术点&#xff0c;专业水平也一直处于龟速…
阅读更多...
无痛迁移：图解 Kubernetes 集群升级步骤

无痛迁移：图解 Kubernetes 集群升级步骤

本文探究了Kubeadm集群升级工作流程&#xff0c;并以可视化方式展现。着重介绍了控制平面节点和工作节点的升级步骤&#xff0c;涵盖了kubeadm升级、节点清空、kubelet和kubectl升级&#xff0c;以及解除节点封锁的关键步骤。 这个简明扼要的指南可帮助用户理解和执行Kubernete…
阅读更多...
计算机Java项目｜基于Springboot实现患者管理系统

计算机Java项目｜基于Springboot实现患者管理系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助 文末获取源码 项目编号&#xff1a;KS-032…
阅读更多...
new FormData 同时发送表单 json 以及文件二进制流

new FormData 同时发送表单 json 以及文件二进制流

需要新增时同时发送表单 json 以及对应的文件即可使用以下方法传参 let formDataParams new FormData(); 首先通过 new FormData&#xff08;&#xff09; 创建你需要最后发送的表单 接着将你的对象 json 存储&#xff0c;注意使用 new Blob 创建大表单转换成 json 格式。以…
阅读更多...
交换机04_远程连接

交换机04_远程连接

通过远程管理方式连接交换机 1、telnet简介 telnet 是应用层协议 基于传输层TCP协议的&#xff0c;默认端口&#xff1a;23 采用的是明文密码方式 不是很安全&#xff0c;一般用于内网管理。 2、ssh协议简介 ssh 是应用层的协议&#xff0c;基于传输层的TCP协议&#x…
阅读更多...
新手小白必了解c语言之字符串函数

新手小白必了解c语言之字符串函数

本篇介绍字符串库函数为 目录 引言 一&#xff1a;字符串函数的头文件为#include 二&#xff1a;求字符串长度函数 &#xff08;strlen&#xff09; 1.函数介绍 2.函数使用举例 3.模拟实现 三&#xff1a;字符串复制函数(strcpy) 1.函数介绍 2.函数使用举例 3.模…
阅读更多...
lombok注解 @Data使用在继承类上时出现警告解决

lombok注解 @Data使用在继承类上时出现警告解决

一、警告问题 1、Data注解 Data 包含了 ToString、EqualsAndHashCode、Getter / Setter和RequiredArgsConstructor的功能。 当使用 Data注解时&#xff0c;则有了 EqualsAndHashCode注解&#xff08;即EqualsAndHashCode(callSuperfalse)&#xff09;&#xff0c;那么就会在此…
阅读更多...
uni-app 经验分享，从入门到离职（实战篇）——模拟从后台获取图片路径数据后授权相册以及保存图片到本地（手机相册）

uni-app 经验分享，从入门到离职（实战篇）——模拟从后台获取图片路径数据后授权相册以及保存图片到本地（手机相册）

文章目录 &#x1f4cb;前言⏬关于专栏 &#x1f3af;需求描述&#x1f3af;前置知识点&#x1f9e9;uni.showLoading()&#x1f9e9;uni.authorize()&#x1f9e9;uni.downloadFile()&#x1f9e9;uni.saveImageToPhotosAlbum() &#x1f3af;演示代码&#x1f9e9;关于图片接…
阅读更多...
YOLOv5改进 | 2023 | SCConv空间和通道重构卷积（精细化检测，又轻量又提点）

YOLOv5改进 | 2023 | SCConv空间和通道重构卷积（精细化检测，又轻量又提点）

一、本文介绍 本文给大家带来的改进内容是SCConv，即空间和通道重构卷积，是一种发布于2023.9月份的一个新的改进机制。它的核心创新在于能够同时处理图像的空间（形状、结构）和通道（色彩、深度）信息，这样的处理方式使得SCConv在分析图像时更加精细和高效。这种技术不仅适…
阅读更多...
DP专题9 理解01背包问题

DP专题9 理解01背包问题

本题链接&#xff1a;晴问算法 题目&#xff1a; 样例&#xff1a; 输入 5 8 3 5 1 2 2 4 5 2 1 3 输出 10 思路&#xff1a; 对于 01 背包问题&#xff0c;我们需要明确 DP 数组的含义&#xff0c;这里 经典的 01 背包问题可以用 二维DP进行表示。 即&#xff1a; dp[ i ]…
阅读更多...
【C++】类和对象详解（类的使用，this指针）

【C++】类和对象详解（类的使用，this指针）

文章目录 前言面向过程和面向对象的初步认识类的引入类的定义类的访问限定符和封装性访问限定符封装性 类的作用域类的实例化类对象模型如何计算类对象的大小类对象的存储方式猜测结构体内存对齐规则 this指针this指针的引出this指针的特性 总结 前言 提示&#xff1a;这里可以…
阅读更多...
红帽Redhat安装教程及安装出错（Liunx）

红帽Redhat安装教程及安装出错（Liunx）

一、红帽5安装 1.打开vmware，新建虚拟机。或者文件→新建虚拟机 2.自定义，下一步 3.下一步 4.稍后安装操作系统，下一步 5.linux 红帽5 64位，下一步 6.给虚拟机取名字，选择安装路径。下一步 7.下一步（可以根据自己的电脑配置稍微增加数量） 8.4GB 下一步 9.仅主机（根据需…
阅读更多...
运维工程师——敢问路在何方！

运维工程师——敢问路在何方！

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 ✨特色专栏&#xff1a…
阅读更多...
[NISACTF 2022]popchains

[NISACTF 2022]popchains

[NISACTF 2022]popchains wp 题目代码&#xff1a; Happy New Year~ MAKE A WISH <?phpecho Happy New Year~ MAKE A WISH<br>;if(isset($_GET[wish])){unserialize($_GET[wish]); } else{$anew Road_is_Long;highlight_file(__FILE__); } /**********************…
阅读更多...
RTT打印时间戳

RTT打印时间戳

官方的RTT VIEWER没有打印接收时间戳的功能&#xff0c;经过查找后发现可以有以下三种打印时间戳的方法。 第三方的RTT上位机ExtraPutty自己打印 第三方的RTT上位机 码云上有一个RTT_T2的仓库&#xff0c;基于python qt包写的画面&#xff0c;通过pylink来jlink通信。 优点…
阅读更多...
CorelDRAW 2023 中文破解、终身永久版 (附序列号)

CorelDRAW 2023 中文破解、终身永久版 (附序列号)

CorelDRAW2023是一款非常专业的电脑图像设计工具。该产品推出了全新的2023版本&#xff0c;在功能和体验上更进一步&#xff0c;最新的填充和透明设备功能可以完全控制任何类型的纹理&#xff0c;适用于网络摄影、印刷项目、艺术、排版等&#xff0c;让你可以更好的进行图像设计…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站