This content originally appeared on Bootstrap Blog and was authored by Mark Otto
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!
Font files
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.
Updated icons
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 (
flltofill).
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.
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 (2020-12-23T21:30:00+00:00) Bootstrap Icons v1.2.2. Retrieved from https://www.scien.cx/2020/12/23/bootstrap-icons-v1-2-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.