【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.mzph.cn/news/602306.shtml

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

相关文章

深入了解Apache 日志,Apache 日志分析工具

Apache Web 服务器在企业中广泛用于托管其网站和 Web 应用程序&#xff0c;Apache 服务器生成的原始日志提供有关 Apache 服务器托管的网站如何处理用户请求以及访问您的网站时经常遇到的错误的重要信息。 什么是 Apache 日志 Apache 日志包含 Apache Web 服务器处理的所有事…

tyxsspa/AnyText 阿里生成文字

Dockerfile ################ # 使用 NVIDIA CUDA 11.8 开发环境作为基础镜像 FROM nvcr.io/nvidia/cuda:12.1.1-cudnn8-runtime-ubuntu22.04 # 设置非交互式安装模式以避免某些命令在构建过程中暂停 ENV DEBIAN_FRONTENDnoninteractive # 更新软件包列表并安装基本工具 RUN…

B+树索引及其原理

MySQL索引的底层结构是B树&#xff0c;为什么它会选择这个结构&#xff1f;联合索引是怎么实现的&#xff1f;最左侧匹配原则的原理是什么&#xff1f;本文将一一解答这些疑惑。 1 前置知识 在学习B树之前&#xff0c;我们先了解下其他的树形结构&#xff1a;二叉树、平衡二叉…

locust 快速入门--异常(Exceptions)与失败(Failures)

背景&#xff1a; 使用locust进行压测的时候&#xff0c;服务器响应已经异常了&#xff0c;但是从UI页面上看到的还是正常的响应。直至服务完全挂掉&#xff0c;才会出现异常信息。 locust认为HTTP响应代码是OK&#xff08;<400&#xff09;是成功的。实际服务的响应代码是2…

数据结构之堆——学习笔记

1.堆的简介&#xff1a; 接下来看一下堆的建立&#xff1b; 接下来是如何在堆中插入数据以及删除数据&#xff1a; 大根堆的插入操作类似只是改变了一下大于和小于符号&#xff0c;同时插入操作的时间复杂度为O&#xff08;logn&#xff09;。 来看几个问题&#xff1a; 答案当…

每日一题——LeetCode1051.高度检查器

方法一 sort排序&#xff1a; 创建一个元素和heights一模一样的expect数组 &#xff0c;将expect数组从小到大进行排序&#xff0c;比较heights和expect相同位置不同的元素个数 var heightChecker function(heights) {var expect [],count0for(const n of heights){expect.…

Ubuntu同步两个剪切板

众所周知&#xff0c;ubuntu系统中有两套剪切板。第一个剪切板是用鼠标操作&#xff0c;鼠标选中则复制&#xff0c;点击鼠标中键则粘贴&#xff08;这个剪切板通常叫做——选择缓冲区&#xff09;。第二个剪切板则是真正的剪切板&#xff0c;使用ctrlc&#xff08;在终端中默认…

qml的操作 -- VS2022开发qml,

在使用VS开发软件的时候一般大型软件都会使用模组的方式。每个模组之间独立开发&#xff0c;关于qml写的UI模组也不例外&#xff0c;如果所有的qml都挤在一个文件夹下也不利于管理&#xff0c;维护起来也比较吃力。比较好的管理方法就是按照功能分布存放在不同的文件夹下。还有…

网络实训模拟考察题目和答案(华为eNSP综合实验考试)

拓扑中四个交换机五个路由器&#xff0c;共九个设备 答案是对应的九个脚本&#xff08;从设备命名到保存&#xff09; 全部复制粘贴后&#xff0c;从PC1、PC2都是能Ping通服务器的&#xff08;保及格&#xff09;&#xff0c;其他要求没检查 题目 VLAN信息 设备名称端口链路…

分布式锁相关问题及答案(2024)

1、什么是分布式锁&#xff1f;为什么要用分布式锁&#xff1f; 分布式锁是一种在分布式计算环境中用于避免资源冲突和保证数据一致性的同步机制。它用来确保在分布式系统中&#xff0c;对于给定的资源&#xff0c;不管是数据库条目、文件或是任何其他的资源&#xff0c;一次只…

windows 查看所有端口占用情况

winR&#xff0c;调出cmd窗口&#xff1a; 输入命令 netstat -ano 内容太多&#xff0c;显示不全&#xff0c;怎么办? 输入下面命令 netstat -ano > d:\1.log 在d盘根目录下就产生了 输出文件 打开可以看到如下内容 活动连接协议 本地地址 外部地址 状…

【Android取证篇】小米手机OTG取证知识

【Android取证篇】小米手机OTG取证知识 小米手机OTG使用方法—【蘇小沐】 目录 1、OTG用途 2、手机连不上U盘 3、小米手机有没有OTG 4、手机usb调试找不到 5、MHL能否在HDMI输出视频的同时进行USB传输 1、OTG用途 使用OTG外接设备&#xff0c;需要使用和手机接口对应匹配的…

JSP+Servlet 重要知识点 (含面试题)

JSP是Servlet技术的扩展&#xff0c;本质上就是Servlet的简易方式。JSP编译后是“类servlet”。 这里提一句&#xff1a; jsp已经没有深入学习的必要了&#xff0c;除了维护老项目能用上一些&#xff0c;基本属于被淘汰的边缘了。Servlet还是有必要学习一下&#xff0c;比如sp…

判断回文字符串—C语言

题目要求 输入一个字符串&#xff0c;判断该字符串是否为回文。回文就是字符串中心对称&#xff0c;从左向右读和从右向左读的内容是一样的。 输入格式&#xff1a; 输入在一行中给出一个不超过80个字符长度的、以回车结束的非空字符串。 输出格式&#xff1a; 输出在第1行中…

Spring Bean的获取方法 (手动注入bean)超级实用

常用的地方&#xff1a; 比如&#xff1a;初始化方法调用数据库的方法中&#xff0c;这时候操作数据库的(bean 容器)方法还没有创建好。 方法如下&#xff1a; package com.example.mqtt_mode.mqtt.config;import org.springframework.beans.BeansException; import org.spr…

【本科生通信原理】【实验报告】【北京航空航天大学】实验四:模拟信号的数字化及编码

目录 一、实验目的二、实验内容三、实验程序四、实验结果五、实验分析六、参考文献 一、实验目的 1、掌握低通信号的抽样及重建过程&#xff1b; 2、掌握PCM的编码及译码过程。 二、实验内容 共2问&#xff1a; 三、实验程序 1、 function q1() dt 0.001; % 时间分辨率…

C++11_右值引用

文章目录 前言一、右值引用是什么&#xff1f;那么&#xff0c;什么又是右值&#xff1f;右值引用 二、使用步骤和意义1.1.11.2 2.右值引用的最大意义2.1 完美转发2.2 万能折叠 前言 C11 是2011年对C这门语言发布的新标准&#xff0c;并且此次标准引入了十分多的新特性&#x…

如何本地搭建DolphinScheduler并无公网ip远程访问管理界面

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…

通过cpolar在公网访问本地网站

通过cpolar可以轻松将本地网址映射到公网进行访问&#xff0c;下面简要介绍一下实现步骤。 目录 一、cpolar下载 二、安装 三、使用 3.1 登录 3.2 创建隧道 一、cpolar下载 cpolar官网地址&#xff1a;cpolar - secure introspectable tunnels to localhost 通过QQ邮箱…