【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 服务器处理的所有事…

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信息 设备名称端口链路…

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…

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

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

如何本地搭建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邮箱…

网络请求 - 异步编程详解

一、概述 网络管理模块主要提供以下功能&#xff1a; HTTP数据请求&#xff1a;通过HTTP发起一个数据请求。WebSocket连接&#xff1a;使用WebSocket建立服务器与客户端的双向连接。Socket连接&#xff1a;通过Socket进行数据传输。 HTTP和WebSocket都是啥&#xff1f; 比如我…

MyBatis - 批量更新(update foreach)报错

在使用mybatis执行批量更新(update foreach)数据的时候报错如下&#xff1a; org.springframework.jdbc.BadSqlGrammarException: ### Error updating database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; c…

基于web3+solidity的众筹项目

基本配置&#xff1a;node、npm、yarn&#xff0c;安装ganache&#xff0c;chrome&#xff0c;chrome安装插件MetaMask&#xff0c; 主要功能&#xff1a;目的是实现一个简单的众筹平台&#xff0c;允许用户发起筹款项目、捐款、提出使用资金请求以及证明人证明。 部分合约&…

echarts 仪表盘进度条 相关配置

option {series: [{type: gauge,min: 0,//最大值max: 100, //最小值startAngle: 200,//仪表盘起始角度。圆心 正右手侧为0度&#xff0c;正上方为90度&#xff0c;正左手侧为180度。endAngle: -20,//仪表盘结束角度splitNumber: 100, //仪表盘刻度的分割段数itemStyle: {color…

深度学习|4.1 深L层神经网络 4.2 深层网络的正向传播

4.1 深L层神经网络 对于某些问题来说&#xff0c;深层神经网络相对于浅层神经网络解决该问题的效果会较好。所以问题就变成了神经网络层数的设置。 其中 n [ i ] n^{[i]} n[i]表示第i层神经节点的个数&#xff0c; w [ l ] w^{[l]} w[l]代表计算第l层所采用的权重系数&#xff…

day07 四数相加Ⅱ 赎金信 三数之和 四数之和

题目1&#xff1a;454 四数相加Ⅱ 题目链接&#xff1a;454 四数相加Ⅱ 题意 4个整数数组nums1&#xff0c; nums2&#xff0c; nums3&#xff0c; nums4的长度均为n&#xff0c;有多少个元组&#xff08;i&#xff0c;j&#xff0c;k&#xff0c;l&#xff09;使得 nums[…