Bootstrap Icons · Bootstrap 官方开源图标（icon）库

您所在的位置：网站首页 › Svg文件修改字体 › Bootstrap Icons · Bootstrap 官方开源图标（icon）库

Bootstrap Icons · Bootstrap 官方开源图标（icon）库

2024-03-15 16:29| 来源: 网络整理| 查看: 265

图标列表 Alarm fill Alarm Alt App indicator App Archive fill Archive Arrow 90deg down Arrow 90deg left Arrow 90deg right Arrow 90deg up Arrow bar down Arrow bar left Arrow bar right Arrow bar up Arrow clockwise Arrow counterclockwise Arrow down circle fill Arrow down circle Arrow down left circle fill Arrow down left circle Arrow down left square fill Arrow down left square Arrow down left Arrow down right circle fill Arrow down right circle Arrow down right square fill Arrow down right square Arrow down right Arrow down short Arrow down square fill Arrow down square Arrow down up Arrow down Arrow left circle fill Arrow left circle Arrow left right Arrow left short Arrow left square fill Arrow left square Arrow left Arrow repeat Arrow return left Arrow return right Arrow right circle fill Arrow right circle Arrow right short Arrow right square fill Arrow right square Arrow right Arrow up circle fill Arrow up circle Arrow up left circle fill Arrow up left circle Arrow up left square fill Arrow up left square Arrow up left Arrow up right circle fill Arrow up right circle Arrow up right square fill Arrow up right square Arrow up right Arrow up short Arrow up square fill Arrow up square Arrow up Arrows angle contract Arrows angle expand Arrows collapse Arrows expand Arrows fullscreen Arrows move Aspect ratio fill Aspect ratio Asterisk At Award fill Award Backspace fill Backspace reverse fill Backspace reverse Backspace Bag check Bag dash Bag fill Bag plus Bag Bar chart fill Bar chart Basket fill Basket Basket2 fill Basket2 Basket3 fill Basket3 Battery charging Battery full Battery half Battery Bell fill Bell Blockquote left Blockquote right Book half Book Bookmark check Bookmark dash Bookmark fill Bookmark plus Bookmark Bookmarks fill Bookmarks Bootstrap fill Bootstrap reboot Bootstrap Bounding box circles Bounding box Box arrow down left Box arrow down right Box arrow down Box arrow in down left Box arrow in down right Box arrow in down Box arrow in left Box arrow in right Box arrow in up left Box arrow in up right Box arrow in up Box arrow left Box arrow right Box arrow up left Box arrow up right Box arrow up Box seam Box Braces Briefcase fill Briefcase Brightness alt high fill Brightness alt high Brightness alt low fill Brightness alt low Brightness high fill Brightness high Brightness low fill Brightness low Brush Bucket fill Bucket Building Bullseye Calendar check fill Calendar check Calendar date fill Calendar date Calendar day fill Calendar day Calendar fill Calendar minus fill Calendar minus Calendar month fill Calendar month Calendar plus fill Calendar plus Calendar Calendar2 check fill Calendar2 check Calendar2 date fill Calendar2 date Calendar2 day fill Calendar2 day Calendar2 fill Calendar2 minus fill Calendar2 minus Calendar2 month fill Calendar2 month Calendar2 plus fill Calendar2 plus Calendar2 Calendar3 fill Calendar3 Calendar4 Camera video fill Camera video off fill Camera video off Camera video Camera Capslock fill Capslock Card checklist Card heading Card image Card list Card text Caret down fill Caret down square fill Caret down square Caret down Caret left fill Caret left square fill Caret left square Caret left Caret right fill Caret right square fill Caret right square Caret right Caret up fill Caret up square fill Caret up square Caret up Cart check Cart dash Cart fill Cart plus Cart Cart2 Cart3 Cart4 Chat dots fill Chat dots Chat fill Chat quote fill Chat quote Chat square dots fill Chat square dots Chat square fill Chat square quote fill Chat square quote Chat square Chat Check all Check circle fill Check circle Check square fill Check square Check Check2 all Check2 circle Check2 square Check2 Chevron bar contract Chevron bar down Chevron bar expand Chevron bar left Chevron bar right Chevron bar up Chevron compact down Chevron compact left Chevron compact right Chevron compact up Chevron contract Chevron double down Chevron double left Chevron double right Chevron double up Chevron down Chevron expand Chevron left Chevron right Chevron up Circle fill Circle half Circle square Circle Clipboard data Clipboard Clock fill Clock history Clock Cloud download Cloud fill Cloud slash fill Cloud slash Cloud upload Cloud Code slash Code Collection fill Collection play fill Collection play Collection Columns gap Columns Command Compass Cone striped Cone Controller Credit card Crop Cup Cursor fill Cursor text Cursor Dash circle fill Dash circle Dash square fill Dash square Dash Diamond fill Diamond half Diamond Display fill Display Door closed fill Door closed Dot Download Droplet fill Droplet half Droplet Egg fill Egg fried Egg Eject fill Eject Emoji angry Emoji dizzy Emoji frown Emoji laughing Emoji neutral Emoji smile upside down Emoji smile Emoji sunglasses Envelope fill Envelope open fill Envelope open Envelope Exclamation circle fill Exclamation circle Exclamation diamond fill Exclamation diamond Exclamation octagon fill Exclamation octagon Exclamation square fill Exclamation square Exclamation triangle fill Exclamation triangle Exclamation Exclude Eye fill Eye slash fill Eye slash Eye File arrow down File arrow up File break File check File code File diff File earmark arrow down File earmark arrow up File earmark break File earmark check File earmark code File earmark diff File earmark minus File earmark plus File earmark ruled File earmark spreadsheet File earmark text File earmark zip File earmark File minus File plus File post File richtext File ruled File spreadsheet File text File zip File Files alt Files Film Filter left Filter right Filter Flag fill Flag Folder check Folder fill Folder minus Folder plus Folder symlink fill Folder symlink Folder Fonts Forward fill Forward Fullscreen exit Fullscreen Funnel fill Funnel Gear fill Gear wide connected Gear wide Gear Gem Geo alt Geo Gift fill Gift Graph down Graph up Grid 1x2 fill Grid 1x2 Grid 3x2 gap fill Grid 3x2 gap Grid 3x2 Grid 3x3 gap fill Grid 3x3 gap Grid 3x3 Grid fill Grid Grip horizontal Grip vertical Hammer Hand index thumb Hand index Hand thumbs down Hand thumbs up Handbag fill Handbag Hash Headphones Heart fill Heart half Heart Hexagon fill Hexagon half Hexagon House door fill House door House fill House Hr Image alt Image fill Image Images Inbox fill Inbox Inboxes fill Inboxes Info circle fill Info circle Info square fill Info square Info Intersect Justify left Justify right Justify Kanban fill Kanban Laptop Layers fill Layers half Layers Layout sidebar inset reverse Layout sidebar inset Layout sidebar reverse Layout sidebar Layout split Layout text sidebar reverse Layout text sidebar Layout text window reverse Layout text window Layout three columns Layout wtf Life preserver Lightning fill Lightning Link 45deg Link List check List nested List ol List task List ul List Lock fill Lock Map Mic fill Mic mute fill Mic mute Mic Minecart loaded Minecart Moon Music note beamed Music note list Music note Music player fill Music player Newspaper Octagon fill Octagon half Octagon Option Outlet Paperclip Pause fill Pause Pen Pencil square Pencil Pentagon fill Pentagon half Pentagon People fill People Person bounding box Person check fill Person check Person circle Person dash fill Person dash Person fill Person lines fill Person plus fill Person plus Person square Person Phone landscape Phone Pie chart fill Pie chart Pip fill Pip Play fill Play Plug Plus circle fill Plus circle Plus square fill Plus square Plus Power Puzzle fill Puzzle Question circle fill Question circle Question diamond fill Question diamond Question octagon fill Question octagon Question square fill Question square Question Receipt cutoff Receipt Reply all fill Reply all Reply fill Reply Screwdriver Search Server Shield fill Shield lock fill Shield lock Shield shaded Shield slash fill Shield slash Shield Shift fill Shift Shop window Shop Shuffle Skip backward fill Skip backward Skip end fill Skip end Skip forward fill Skip forward Skip start fill Skip start Slash circle fill Slash circle Slash square fill Slash square Slash Sliders Soundwave Speaker Square fill Square half Square Star fill Star half Star Stop fill Stop Stopwatch fill Stopwatch Subtract Sun Table Tablet landscape Tablet Tag fill Tag Terminal fill Terminal Text center Text indent left Text indent right Text left Text right Textarea t Textarea Three dots vertical Three dots Toggle off Toggle on Toggles Tools Trash fill Trash Trash2 fill Trash2 Triangle fill Triangle half Triangle Trophy Truck flatbed Truck Tv fill Tv Type bold Type h1 Type h2 Type h3 Type italic Type strikethrough Type underline Type Union Unlock fill Unlock Upc scan Upc Upload View list View stacked Volume down fill Volume down Volume mute fill Volume mute Volume off fill Volume off Volume up fill Volume up Vr Wallet Wallet2 Watch Wifi Window Wrench X circle fill X circle X diamond fill X diamond X octagon fill X octagon X square fill X square X

安装

Bootstrap Icons 已被发布到了 npm，但是仍然可以手动下载并安装。

通过 npm 安装

利用如下 npm 命令安装 Bootstrap Icons。

npm install bootstrap-icons 下载安装包

所有已发布的版本都保存在 GitHub 上。所有 SVG 格式的图标都包含在安装包内，其中也包括许可证和 readme 文件。package.json 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。

Download latest ZIP

用法

Bootstrap Icons 的图标都是 SVG 格式的，因此你可以通过以下几种方式将他们应用到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。Bootstrap Icons 默认将 width 和 height 设置为 1em，便于你通过 font-size 属性重置图标的大小。

内嵌

将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。

作为外部图像文件引用

将 Bootstrap icons 的 SVG 文件复制到你所选择的目录中，并像引用普通图像一样使用元素引入 SVG 图标。

CSS

你还可以在 CSS 中使用 SVG 图标（当指定十六进制颜色值时务必对某些字符进行转义，例如将 # 字符替换为 %23）。如果未指定元素的 width 和 height 属性，则图标将填满所有可用空间。

如果需要使用 background-size 来调整图标的大小，则必须设置 viewBox 属性。请注意，xmlns 属性是必需的。

.bi::before { display: inline-block; content: ""; background-image: url("data:image/svg+xml,"); background-repeat: no-repeat; background-size: 1rem 1rem; }

设置样式

可以通过设置 .text-* 类或自定义 CSS 来改变颜色：

... 使用 SVG 时的注意事项

SVG 是非常棒的技术，但是它们仍然存在一些需要处理的怪异行为。考虑到 SVG 有多种使用方式，我们在代码中没有包含以下这些属性和处理手段。

Internet Explorer 和 Edge 浏览器对焦点的处理不正确。在嵌入 SVG 时，请为元素添加 focusable="false" 属性。在 Stack Overflow 上有详细解释

某些浏览器将 SVG 视为带有语音辅助的标签。尽可能添加 role="img" 属性以避免这些问题。详见此文章

Safari 浏览器在使用非可聚焦（non-focusable）的 SVG 时会忽略 aria-label 属性。因此，在嵌入文件时请设置 aria-hidden="true" 属性，并通过 CSS 在视觉上隐藏与之有相同功能的标签。点击这里查看详情

如果您发现了其他应该引起注意的问题，请向我们提交 issue 并详细说明。

【本文地址】

Bootstrap Icons · Bootstrap 官方开源图标（icon）库

Bootstrap Icons · Bootstrap 官方开源图标（icon）库

今日新闻

推荐新闻