关于bootstrap v5如何引用图标

已于 2024-07-31 19:33:06 修改
阅读量173 收藏
点赞数 2
文章标签： css 前端
于 2024-07-31 18:53:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75048134/article/details/140830007
版权

研究半天又下载又复制粘贴的结果出现的位置和预想不同

就拿我这个图标举例

右边有下载，下载之后是一个svg文件

然后底下有i的复制

还有这个html代码的复制，一溜烟复制然后把html代码复制到head里结果在开头显示了我想在body的li标签里显示，其实特别简单，我查了一下这个应该是一个图片文件，只要正常把svg文件下载并且剪切到html文件的一个目录下，直接代码img标签引用就好了，就把它当成一个普通图片（我是一个刚入门的，如果哪里说的不对感谢指正）

至于不在一条水平线上，直接用style="vertical-align: middle;"加在img标签里就好啦

m0_75048134
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap v5 Button 带有图标的按键
SimonHeeeee的博客
10-18 699
Button Icon Fontawesome <!-- google fonts --> <script src="https://kit.fontawesome.com/1d9373cc66.js" crossorigin="anonymous"></script> <button type="button" class="btn btn-dark btn-lg"> <i class="fab fa-apple"></i>
使用Bootstrap搭界面案例以及图标的运用
m0_62839141的博客
04-03 2426
准备工作: 先在<head>(头部)里<!-- 引入Bootatrap的CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> 在body里面的最后面引入JQuery的类库和Bootstarap的类库(是为了加快的页面加载的速度) [注：在引入Bootstrap的类库之前必须引入JQuery库] <!-- 引入JQuery的类库 --> <s...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5 图标库 bootstrap-icons
bootstrap5引入图标库
weixin_51983027的博客
05-24 848
bootstrap5引入图标库，制作一个图标按钮
bootstrap5 添加图标
weixin_42613018的博客
12-28 576
要在 Bootstrap 5 中添加图标，您可以使用 <i> 标签并使用带有 .bi 类的字体图标库。 例如，要添加一个电话图标，可以使用以下代码： <i class="bi bi-telephone"></i> ...
Bootstrap V5 图标字体的引入以及使用方法
m0_60273757的博客
11-19 7507
简单快速学会引入并使用最新版本的Bootstrap图标字体，两种方式教会你轻松搞定。
Bootstrap5之icons字体图标及简单布局案例
yuanjinshenglife的专栏
01-27 2134
Bootstrap5之icons字体图标及简单布局案例
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
linjun的博客
07-25 3814
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
Bootstrap：简介和基本使用
最新发布
程序员无羡的博客
03-20 1588
Bootstrap：简介和基本使用
bootstrap(4.6x)图标库的引用
weixin_43727933的博客
05-15 2240
bootstrap(4.6x)图标库的引用 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 利用业余时间开发的。它基于 Html、Css、JavaScipts 于2011 年8月在 GitHub 发布为开源产品。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑、手机。是全球最受欢迎的前端开源工具库，网上有关图标库的引用的文章不少但真对4.0以上的版本文章却很少，由于4.6x版本与3.0x的引用方式出现了非常大的变化，本章将讨论4.6x图
Bootstrap 字体图标(Glyphicons)
01-19
Bootstrap 字体图标(Glyphicons) @font-face { font-family:’Glyphicons Halflings’;src:url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/fonts/glyphicons-halflings-regular.eot?#iefix) format(’embedded-opentype’),url
InstitutoMiaw-Modelo-inicial:Bootstrap V5更新站点
04-13
5. **更丰富的图标库**：Bootstrap V5引入了新的图标集，名为Bootstrap Icons，包含了大量的矢量图标，可以直接在项目中使用。 6. **无障碍功能增强**：关注无障碍访问是Bootstrap V5的一个重要改进，它增强了组件...
BootstrapV5:Bootstrap版本5练习
05-07
4. **更新的字体和图标**：Bootstrap V5采用了新的开源字体家庭"Inter"，并弃用了 Glyphicons，转而使用更强大的SVG图标库Font Awesome 5。 5. **增强的无障碍性**：V5更加注重无障碍性（a11y），遵循WCAG 2.1标准...
bootstrap5-template-project
05-03
它是由Bootstrap v4构建的，并计划针对v5进行更新。 回购模板 设置为入门模板，您可以轻松生成新的GitHub存储库。 在资源库主页上，单击“ Use this template按钮。 包含什么 单个HTML页面（ index.html ）演示了...
personal-website:我的个人最小网站，使用Bootstrap v5，animate.css，fontawesome和tsParticles创建
05-09
Bootstrap v5、animate.css、fontawesome以及tsParticles是现代网页开发中的四个关键工具，它们在构建一个吸引人的、功能丰富的个人网站时发挥着重要作用。接下来，我们将深入探讨这些技术及其在个人网站构建中的...
bootstrap
03-17
关于bootstrap-npm-starter是一个GitHub模板存储库，用于创建由Bootstrap支持的新的npm项目，由Bootstrap共同作者@mdo维护。 您也可以将其用作自己的Bootstrap原型沙箱。 它是由Bootstrap v4构建的，并计划针对v5...
前端基础之《Bootstrap（5）—CSS组件_字体图标、按钮组和下拉菜单》
csj50的专栏
11-03 889
6、两端对齐的按钮组（.btn-group-justified）4、按钮组垂直排列（.btn-group-vertical）5、按钮组嵌套（.dropdown-toggle）1、把多个按钮连在一起（.btn-group）2、按钮工具条（.btn-toolbar）1、bootstrap提供的文字图片。选项（.dropdown-menu）巨大的（.btn-group-lg）微小的（.btn-group-xs）1、下拉菜单（.dropdown）小的（.btn-group-sm）7、按钮组带下拉菜单。
Bootstrap图标引用方法
我的web前端学习
01-16 5192
Bootstrap图标集，Glyphicons图标 Bootstrap的图标组件并非自己制作的，而是由国外一个图标团队提供的，虽然它们自身是收费图标，不过他们授权Bootstrap可以免费使用它们的200个图标。 Glyphicons组件使用起来相当方便快捷，你可以参考Bootstrap图标引用样式，使用方法也相当简单，类似以下代码即可：<span class="glyphicon g
Bootstrap字符图标简单使用
土味儿
06-29 2720
Bootstrap字符图标的使用
Bootstrap v5中卡片组件类名
06-09
Bootstrap v5中卡片组件的样式类名为 "card"，可以通过添加不同的后缀来实现不同的样式效果，例如： - "card-body"：卡片主体内容 - "card-title"：卡片标题 - "card-subtitle"：卡片副标题 - "card-text"：卡片文字内容 - "card-img-top"：卡片顶部图片 - "card-header"：卡片头部 - "card-footer"：卡片底部 此外，还可以添加 "bg-primary"、"bg-secondary"、"bg-success"、"bg-danger"、"bg-warning"、"bg-info"、"bg-light"、"bg-dark" 等类名来实现不同的背景颜色效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值