Bootstrap Icons 快速上手5 分钟预览并使用 2000 免费 SVG 图标【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons做页面交付前你大概率遇到过这种尴尬按钮就差一个小图标随手搜来的几个却风格不统一、粗细不一用上去显得页面很拼凑。Bootstrap Icons是一个收录 2000 图标的免费 SVG 图标库所有图标都基于 16×16 像素网格设计、只填充不描边MIT 许可证可商用。这篇文章带你从安装、本地预览到挑图标写进页面走完一次完整流程。5 分钟装好并预览全部图标如果你用 npm 管理依赖一行命令即可装好包内包含处理好的 SVG、精灵图和图标字体npm i bootstrap-iconsPHP 项目也可以走 Composer 这条路composer require twbs/bootstrap-icons更推荐你先把仓库拉到本地跑一遍预览挑图标效率高很多。以下命令会克隆仓库、装依赖并启动本地文档服务器git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm i npm start启动后在浏览器打开http://localhost:4000就是这样一个可以边搜边看的图标墙挑中某个图标后记下它的文件名例如alarm-fill这个名字决定了后面三种引用方式里怎么写。三种最常用的 Bootstrap Icons 引用方式按你图标放在哪来决定用哪种写法下面三种覆盖了绝大多数情况。场景一图标就长在 HTML 里。直接把 SVG 代码粘进页面从 图标源文件目录 里复制即可路径和类名自带语义svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-alarm-fill viewBox0 0 16 16 path dM6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5m2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.04 8.04 0 0 0 .86 5.387M11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.04 8.04 0 0 0-3.527-3.527/ /svg场景二图标被当作普通资源文件管理。把某个.svg放进项目的静态资源目录用img引用img srcicons/alarm-fill.svg alt闹钟图标 width16 height16场景三想在 HTML 里少写代码。引入图标字体的样式表font/ 目录下的bootstrap-icons.css每个类名对应一个图标写起来最省事i classbi bi-alarm-fill/i三种方式都能用currentColor机制跟随文字颜色这也是整套图标风格统一的关键。精灵图还是图标字体按项目体量二选一图标一多一个个内嵌 SVG 会让 HTML 很臃肿这时该考虑批量引用的两条路线。SVG 精灵图是把 2000 多个图标合并进一个文件仓库根目录的bootstrap-icons.svg页面只请求一次之后用use按名字调用svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#alarm-fill/ /svg图标字体则是把图标编进 woff/woff2 字体里你只写类名浏览器从字体中取字形对图标当排版元素的场景更友好。选型可以简单记为图标少、要单独控制每个元素就用内嵌 SVG图标多、追求少请求就上精灵图页面以文本排版为主则选字体方案。不改 SVG 源文件调整颜色和尺寸图标是矢量颜色、大小都可以在外面控制这是它比 PNG 图标好用的一大块。内嵌 SVG颜色跟着fillcurrentColor走改父级文字颜色即可尺寸直接改width/height或 CSS。图标字体官方文档建议用font-size和color两个属性统一控制比逐处写死省事.bi { font-size: 1.5rem; /* 控制大小 */ color: #0d6efd; /* 控制颜色 */ }配合响应式断点移动端把.bi的尺寸调大一档可读性会更好。常见问题第一次接入容易踩的四个坑下面四个问题在项目文档里都有专门说明提前知道能省不少调试时间。精灵图为什么跨域名时加载不出来Chrome 有个已知限制use引用其他域名下的外部精灵图会失败。把bootstrap-icons.svg和页面放在同一域名下即可这也是精灵图比img多出来的主要注意点。为什么点击图标会出现焦点框Internet Explorer 和旧版 Edge 会默认给 SVG 元素加焦点。在内嵌的svg标签上加focusablefalse就能关掉。屏幕阅读器会读出path之类的噪音吗纯装饰性图标加aria-hiddentrue让读屏器跳过如果图标本身承载含义比如按钮里只有图标给它加roleimg和aria-label静音这类文本替代。同名图标带 -fill 和不带的怎么选不带后缀是线框风格-fill是填充风格比如alarm和alarm-fill。同一个界面里建议只选一种风格混用会显得乱除非你刻意要用填充款强调某个状态。从哪继续深入怎么锁定版本每种用法的完整示例和注意事项都在官方文档里按图标名搜索就能直接复制代码想自己改图标或看设计规范图标源文件目录和 font/ 目录都是打开就能读的纯文本和样式文件。升级时建议在package.json里把版本锁定成^1.13.1这样的写法避免小版本更新带来的意外变化图标本身是静态 SVG按需只复制用到的几个比整包引入更省流量。现在就可以打开本地预览页搜一个arrow把第一个顺眼的图标放进你的项目里——动手放上一个图标比读十页文档都更容易上手。【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Bootstrap Icons 快速上手：5 分钟预览并使用 2000+ 免费 SVG 图标
Bootstrap Icons 快速上手5 分钟预览并使用 2000 免费 SVG 图标【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons做页面交付前你大概率遇到过这种尴尬按钮就差一个小图标随手搜来的几个却风格不统一、粗细不一用上去显得页面很拼凑。Bootstrap Icons是一个收录 2000 图标的免费 SVG 图标库所有图标都基于 16×16 像素网格设计、只填充不描边MIT 许可证可商用。这篇文章带你从安装、本地预览到挑图标写进页面走完一次完整流程。5 分钟装好并预览全部图标如果你用 npm 管理依赖一行命令即可装好包内包含处理好的 SVG、精灵图和图标字体npm i bootstrap-iconsPHP 项目也可以走 Composer 这条路composer require twbs/bootstrap-icons更推荐你先把仓库拉到本地跑一遍预览挑图标效率高很多。以下命令会克隆仓库、装依赖并启动本地文档服务器git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm i npm start启动后在浏览器打开http://localhost:4000就是这样一个可以边搜边看的图标墙挑中某个图标后记下它的文件名例如alarm-fill这个名字决定了后面三种引用方式里怎么写。三种最常用的 Bootstrap Icons 引用方式按你图标放在哪来决定用哪种写法下面三种覆盖了绝大多数情况。场景一图标就长在 HTML 里。直接把 SVG 代码粘进页面从 图标源文件目录 里复制即可路径和类名自带语义svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-alarm-fill viewBox0 0 16 16 path dM6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5m2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.04 8.04 0 0 0 .86 5.387M11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.04 8.04 0 0 0-3.527-3.527/ /svg场景二图标被当作普通资源文件管理。把某个.svg放进项目的静态资源目录用img引用img srcicons/alarm-fill.svg alt闹钟图标 width16 height16场景三想在 HTML 里少写代码。引入图标字体的样式表font/ 目录下的bootstrap-icons.css每个类名对应一个图标写起来最省事i classbi bi-alarm-fill/i三种方式都能用currentColor机制跟随文字颜色这也是整套图标风格统一的关键。精灵图还是图标字体按项目体量二选一图标一多一个个内嵌 SVG 会让 HTML 很臃肿这时该考虑批量引用的两条路线。SVG 精灵图是把 2000 多个图标合并进一个文件仓库根目录的bootstrap-icons.svg页面只请求一次之后用use按名字调用svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#alarm-fill/ /svg图标字体则是把图标编进 woff/woff2 字体里你只写类名浏览器从字体中取字形对图标当排版元素的场景更友好。选型可以简单记为图标少、要单独控制每个元素就用内嵌 SVG图标多、追求少请求就上精灵图页面以文本排版为主则选字体方案。不改 SVG 源文件调整颜色和尺寸图标是矢量颜色、大小都可以在外面控制这是它比 PNG 图标好用的一大块。内嵌 SVG颜色跟着fillcurrentColor走改父级文字颜色即可尺寸直接改width/height或 CSS。图标字体官方文档建议用font-size和color两个属性统一控制比逐处写死省事.bi { font-size: 1.5rem; /* 控制大小 */ color: #0d6efd; /* 控制颜色 */ }配合响应式断点移动端把.bi的尺寸调大一档可读性会更好。常见问题第一次接入容易踩的四个坑下面四个问题在项目文档里都有专门说明提前知道能省不少调试时间。精灵图为什么跨域名时加载不出来Chrome 有个已知限制use引用其他域名下的外部精灵图会失败。把bootstrap-icons.svg和页面放在同一域名下即可这也是精灵图比img多出来的主要注意点。为什么点击图标会出现焦点框Internet Explorer 和旧版 Edge 会默认给 SVG 元素加焦点。在内嵌的svg标签上加focusablefalse就能关掉。屏幕阅读器会读出path之类的噪音吗纯装饰性图标加aria-hiddentrue让读屏器跳过如果图标本身承载含义比如按钮里只有图标给它加roleimg和aria-label静音这类文本替代。同名图标带 -fill 和不带的怎么选不带后缀是线框风格-fill是填充风格比如alarm和alarm-fill。同一个界面里建议只选一种风格混用会显得乱除非你刻意要用填充款强调某个状态。从哪继续深入怎么锁定版本每种用法的完整示例和注意事项都在官方文档里按图标名搜索就能直接复制代码想自己改图标或看设计规范图标源文件目录和 font/ 目录都是打开就能读的纯文本和样式文件。升级时建议在package.json里把版本锁定成^1.13.1这样的写法避免小版本更新带来的意外变化图标本身是静态 SVG按需只复制用到的几个比整包引入更省流量。现在就可以打开本地预览页搜一个arrow把第一个顺眼的图标放进你的项目里——动手放上一个图标比读十页文档都更容易上手。【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考