【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.hqwc.cn/news/326245.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于优质乳制品的不可忽视的关键

关于优质乳制品的不可忽视的关键 奶源是乳制品生产中至关重要的一环。无论是牛奶、酸奶、乳酪还是黄油&#xff0c;它们的品质和口感都与奶源密不可分。因此&#xff0c;羊大师发现了解奶源的重要性&#xff0c;对于生产商、消费者乃至整个乳制品行业来说&#xff0c;都至关重…

kubernetes(k8s)集群常用指令

基础控制指令 # 查看对应资源: 状态 $ kubectl get <SOURCE_NAME> -n <NAMESPACE> -o wide 查看默认命名空间的pod [rootk8s-master ~]# kubectl get pod NAME READY STATUS RESTARTS AGE nginx 1/1 Running 0 3h53m查看所有pod [roo…

MySQL-DDL

DDL是数据定义语言&#xff0c;用来定义数据对象&#xff08;数据库&#xff0c;表&#xff0c;字段&#xff09; 数据库操作&#xff1a; 1.查询&#xff1a; 查询所有数据库&#xff1a;SHOW DATABASES; 查询当前数据库&#xff1a;SELECT DATABASE(); 2.创建&#xff1a; C…

【python入门】day20:学生信息管理系统CRUD,排序模块和项目打包中的业务流程、具体实现

CRUD&#xff0c;每个程序员都必须掌握的 录入C create def save(lst):#保存信息try: #保存成绩时有可能出错&#xff0c;所以使用try-exceptstu_txtopen(filename,a,encodingutf-8)#filename是个变量&#xff0c;所以不用写单引号#文件以追加模式打开#怕中文乱码&…

C++异常处理机制

文章目录 C语言传统的处理错误的方式C异常概念异常的使用自定义异常体系C标准库的异常体系异常的优缺点 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击…

eureka注册列表 某服务出现多个服务实例

最近文件导出功能偶发成功&#xff0c;大部分情况都失败&#xff0c;开始以为接口被拦截&#xff0c;gateway服务没有接口调用日志&#xff0c;发现测试环境可以&#xff0c;正式环境功能无法正常使用。 偶然看到注册中心如下 发现file服务有3个实例&#xff0c;调用接口将错误…

Jmeter 性能 —— 电商系统TPS计算!

1、怎么计算得出TPS指标 ①第一个通过运维那边给的生产数据&#xff0c;看一下生产进件有多少&#xff0c;计算得来的&#xff0c;如果没有生产数据&#xff0c;或者不过就看如下的方法 ②第二个就是根据最近一个月的实际访问数据&#xff0c;比如每天调用了多少个接口&#…

【机器学习:欧氏距离 】机器学习中欧氏距离的理解和应用

【机器学习&#xff1a;欧氏距离 】机器学习中欧氏距离的理解和应用 距离公式二维更高的维度点以外的物体属性欧几里得距离的平方概括历史 在数学中&#xff0c;欧氏距离’是指欧氏空间中任意两点之间的直线距离。这种距离可以通过应用勾股定理来计算&#xff0c;利用两点的笛卡…

Filter Options in Select Field

Filter Options in Select Field 假设有两个下拉字段State和City。邦有两个值卡纳塔克邦和马哈拉施特拉邦&#xff0c;城市有四个值&#xff0c;班加罗尔&#xff0c;迈索尔&#xff0c;孟买和浦那。如果希望根据State中选择的值过滤City中的选项&#xff0c;可以编写如下所示的…

LeetCode 每日一题 Day 32 ||递归单调栈

2487. 从链表中移除节点 给你一个链表的头节点 head 。 移除每个右侧有一个更大数值的节点。 返回修改后链表的头节点 head 。 示例 1&#xff1a; 输入&#xff1a;head [5,2,13,3,8] 输出&#xff1a;[13,8] 解释&#xff1a;需要移除的节点是 5 &#xff0c;2 和 3 。…

Python中列表和字符串的反转

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 一、Python现成的反转功能&#xff1a; 在Python中有专门进行列表反转的函数–reverse() l [13, 30, 42, 85, 9, 45] l.reverse() # [45, 9, 85, 42, 30, 13]还…

苹果macOS 14.3开发者预览版Beta 2发布 修复API会意外失败的问题

1 月 4 日消息&#xff0c;苹果向 Mac 电脑用户推送了 macOS 14.3 开发者预览版 Beta 2 更新&#xff08;内部版本号&#xff1a;23D5043d&#xff09;&#xff0c;本次更新距离上次发布隔了 22 天。 macOS Sonoma 14.3 Beta 2 主要以修复 BUG、提高安全性为主。根据苹果官方更…