We’re ironing out the kinks in our new font files with Bootstrap Icons v1.2.2! We went back to the Figma file and ironed out all the fill-rule details to ensure our SVGs translated into font files properly.
We also snuck in a few bug fixes to existing icons, docs, and some slight visual improvements to some existing icons. Get the details below!
Our icons fonts are (fingers crossed!) free of visual glitches
that made so many unusable across Windows devices. For some reason
macOS and iOS had no problems, but Windows butchered the font
files. Turns out this was a result of inconsistent fill-rule values in our icons, and some font
formats and renderers only support a
non-zero fill rule.
We revisited nearly every icon and got it all sorted out.
Massive shoutout to the Figma Fill Rule Editor plugin that made this relatively quick and painless to update. You can even see in the plugin’s image below how this rule affects rendering of SVGs.
Check out the PR for what’s changed under the hood.
A few icons got touched up with the work for our font files to clean up paths and make them more visually pleasing.
- Locks are a little more legible—they’re taller and narrower.
- Laptops now have a half pixel gap between their base and screen, making them look a little sleeker.
- Shields are 1px taller now, with their inner icons now raised 1px as well. No reason to make them not take up the full viewBox.
- Stopwatch icons look more like actual stopwatches with separate start/stop and lap buttons.
- The bricks icon has its missing grout line restored.
- Renamed patch fill icons to fix typos in their file names
Have some other refinements we should consider? Open an issue to tell us about it.
Last but not least, we ironed out some docs issues. Our navbar is fully functional and inline with the v5 beta site. We also added new aliases for icon filtering on homepage.
To get started, install via npm:
npm i bootstrap-icons
For the Figma users out there, you can also snag the icons from Figma.