This content originally appeared on Bootstrap Blog and was authored by Mark Otto
Say hello to over 60 new icons with Bootstrap Icons v1.3.0! We focused our efforts on filling in some holes and expanding some coverage of a few categories. We’re super happy with how the new additions came out and hope y’all love them, too!
As usual, we also snuck in some bug fixes to existing icons and ours docs. After this release, we’re back to focusing on shipping updates to Bootstrap v5 and v4. More on that soon, and in the mean time, enjoy the new icons!
60+ new icons
Here’s a look at the new icons in v1.3.0:
- Added window-dock and window-sidebar
- Added two symmetry icons
- Added new stack icon
- Added two speedometer icons
- Added four save icons
- Added rulers icon
- Added filled variations for phone-vibrate, mouse, mouse2, mouse3, and four hand icons
- Added several border icons
- Added paint bucket
- Added four new badges (3D, AR, VR, WC)
- Added four lightbulb icons
- Added eyedropper
- Added mask icon
- Added three color palette icons
- Added layer-forward and layer-backward
- Added two eraser icons
- Added two megaphone icons
- Added four push pin icons
- Added Whatsapp and Telegram social icons
- Added dotted circle dash, circle plus, square dash, and square plus
Have some ideas for new icons we should consider? Open an issue to tell us about it!
CDN quickstart with icon fonts
Since we added icon fonts in v1.2.0, it’s been possible to use a CDN to deliver and use Bootstrap Icons in seconds. Include the stylesheet, place short HTML snippets where you want icons, and you’re done! If you want to include it yourself, here’s how.
-
Include the Bootstrap Icons font stylesheet in the
<head>of your website. Or, use@importto include the stylesheet that way.<!-- Option 1: Include in HTML --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">/* Option 2: Import via CSS */ @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"); -
Add HTML snippets to include Bootstrap Icons where desired.
<i class="bi-alarm"></i>
Want to see it in action? We’ve put together a helpful CodePen demo for using Bootstrap Icons fonts via CDN.
ProTip: Most browsers do not allow SVG sprites to be used across domains, which is why having icon fonts (when SVGs are the preferrable and more accessible method of delivering icons) are so useful. Whenever possible, please use SVGs over icon fonts.
Install
To get started, install via npm:
npm i bootstrap-icons
You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).
Figma
For the Figma users out there, you can also snag the icons from Figma.
This content originally appeared on Bootstrap Blog and was authored by Mark Otto
Mark Otto | Sciencx (2021-01-07T21:30:00+00:00) Bootstrap Icons v1.3.0. Retrieved from https://www.scien.cx/2021/01/07/bootstrap-icons-v1-3-0/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.