Bootstrap字符图标简单使用

原创 已于 2022-06-29 09:40:05 修改 · 3.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #前端 #html

于 2022-06-29 09:38:05 首次发布
本文介绍了如何从官网下载Bootstrap Icons包，通过CDN引入CSS，以及如何在HTML中引用、修改和使用图标。适合初学者快速掌握前端图标应用。

前端是一个绕不过去的槛。记录一下每一个自认为重要的点，免得下次遇到时依然茫然。

一、下载

1、下载安装包

官网地址

在这里插入图片描述

安装包里面没有css文件

2、下载css文件

通过cdn地址，在浏览器中打开并另存。（哈哈，是不是比较拙？！）

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

在这里插入图片描述

在这里插入图片描述

二、目录结构

在这里插入图片描述

在这里插入图片描述

三、html页面引用

1、引入bootstrap-icons.css

在这里插入图片描述

2、修改bootstrap-icons.css

在这里插入图片描述

3、使用

想要哪个图标，就把该图标的class样式加入对应标签上就可以

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

【glyphicon对照表】bootstrap样式可直接使用的图标大全
每日出拳老爷子的博客
01-11 7610
bootstrap样式可直接使用的图标大全
Bootstrap 字体图标
lsx202406的博客
08-02 496
Bootstrap 字体图标是一组预定义的图标，它们被设计成可以像字体一样使用。这意味着您可以通过 CSS 类来调整它们的大小、颜色和阴影等属性，就像操作文本一样。这些图标通常以 SVG 或 Web 字体的形式提供，确保它们在任何分辨率下都清晰可辨。
13.Bootstrap小图标.rar
08-02
13.Bootstrap小图标.rar
bootstrap-icons-1.11.3.zip
03-10
bootstrap-icons-1.11.3.zip
Bootstrap 字体图标(Glyphicons)
最新发布
m0_57545130的博客
10-12 1020
Bootstrap 5 已移除内置的 Glyphicons 图标库，推荐使用更现代的替代方案。本文介绍了 Bootstrap Icons 的引入与使用方法，包括通过 CDN、npm 安装及 SVG 直接嵌入。Bootstrap Icons 提供 2000+ 矢量图标，支持大小、颜色调整，并可与按钮、导航等组件结合使用。其他替代方案如 Font Awesome 和 Material Icons 也提供了丰富的图标选择。开发者可根据项目需求灵活选用图标库，实现轻量且美观的界面设计。
bootstrap EF_Bootstrap Icons - bootstrap专用的漂亮图标库，可以免费商用
weixin_39889642的博客
10-28 441
专门为著名的前端开发 UI 框架 Bootstrap 的组件和文档定制开发的图标库。 介绍Bootstrap 图标库 的设计初衷是与 Bootstrap 组件配合使用，从表单到导航组件等。Bootstrap 图标库 全部是 SVG 文件格式，能够轻松快捷地进行缩放，保证清晰，并可以通过 CSS 设置颜色。虽然 Bootstrap 图标库 是为 Bootstrap 而开发的，但也可以应用在任何项目。...
Bootstrap图标
weixin_33737134的博客
07-01 695
前面的话 　　小图标icon是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标   原理分析 　　Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体 @font-face { font-family: 'Glyphicons ...
Bootstrap5 图标库 bootstrap-icons
09-30
4. `font`：这个目录可能包含了图标字体文件，虽然名为“font”，但实际上这里可能存储的是Web字体文件，如EOT、WOFF、WOFF2和TTF等格式，这些字体文件将图标编码为可显示的字符，允许通过CSS直接使用。 5. `icons`...
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
08-31
在上述描述的问题中，开发者发现使用Google CDN引入Bootstrap时，图标可以正常显示，而在本地引入Bootstrap文件时，图标却无法显示。这表明问题出在字体文件的路径或加载上。开发者通过`Ctrl+左键`检查`@font-face`...
Bootstrap table简单使用总结
08-31
以下是对Bootstrap Table简单使用的详细介绍： 1. **基本构造**： Bootstrap Table可以通过HTML和JavaScript两种方式来构建。HTML构造时，需要在`<table>`标签内设置特定的属性，如`data-toggle="table"`用于启用...
Bootstrap
weixin_65736978的博客
05-04 548
图标的使用 例如：想使用bootstrap定义的闹铃图标，只需要复制图标下面的字符即可，此处为alarm.svg <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="./bootstrap-icons-1.7.2/
bootstrap文件及bootstrap图标大全
05-05
内有bootstrap文件在resource里，版本3.3.7 demo文件里是html文件，里面有bootstrap的图标大全
JS组件系列之Bootstrap Icon图标选择组件
10-22
给大家介绍js组件系列之Bootstrap Icon图标选择组件，对bootstrap icon图标相关知识感兴趣的朋友一起学习吧
Bootstrap Icons 使用与搭建指南
gitblog_00535的博客
08-08 813
Bootstrap Icons 是一个包含大量SVG图标集合的开源项目，可无缝集成到您的Web项目中。下面将详细介绍该项目的目录结构、启动文件以及配置文件。 ## 1. 项目目录结构及介绍 克隆项目后，您会看到以下基本目录结构： ``` bootstrap-icons/ ├── dist/ # 包含编译后的SVG图标和CSS文件 │ ├── svg/ # SVG图标...
【亲测免费】 Bootstrap Icons 使用教程
gitblog_00558的博客
08-08 1523
Bootstrap Icons 是一个开源的图标库，由 Bootstrap 团队开发和维护。它提供了超过 1,600 个 SVG 图标，这些图标可以免费用于任何项目，无论是个人还是商业用途。Bootstrap Icons 的设计理念是简洁、一致和易于使用，它们可以轻松地集成到任何基于 Bootstrap 的项目中，也可以独立使用。 ## 项目快速启动 ### 安装 你可以通过 npm 安装 ...
Bootstrap Icons 安装和配置指南
gitblog_07905的博客
09-13 1047
### 项目基础介绍 Bootstrap Icons 是一个官方的开源 SVG 图标库，专为 Bootstrap 设计。它包含了超过 2,000 个图标，适用于各种 Web 开发项目。Bootstrap Icons 的设计目标是提供高质量、可扩展的图标，以满足开发者的多样化需求。 ### 主要编程语言 Bootstrap Icons 主要使用 SVG（可缩放矢量图形）格式来存储图标。SVG 是一...
推荐使用：Bootstrap Icons - 超过2000个官方开源SVG图标库
gitblog_00001的博客
05-11 679
Bootstrap Icons是一个官方的开源SVG图标库，由Bootstrap团队精心打造，提供了超过2000个高质量的图标，可以轻松地为您的网站或应用添加一致且专业的视觉元素。 ## 项目介绍 Bootstrap Icons是通过npm和Composer发布的，包含了处理过的SVG图标，并支持多种使用方式。它的核心特点是简洁、可定制化和易于集成。该项目提供了一种简单的方法来查看和下载图标，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

土味儿~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值