Bootstrap Icons | Hacker News Reader

Bootstrap Icons

github.com

133 pointsmanjana23 comments

For those curious about icon fonts versus SVG, though icon fonts can be easier for the developer to use, there are drawbacks for your users (especially in accessibility).

But don’t take my word for it: https://css-tricks.com/icon-fonts-vs-svg/

“It all comes down to browser support. If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it (maintaining a PNG copy, inserting an additional element to display PNG version, hiding SVG element… it’s weighty).”

Giving inline SVGs a full green score on “weird failures” isn’t right.

For example, plenty of SVG features, like masks and patterns, use references to ID attributes to compose the effect. If you include multiple inline SVGs on the same page, you now need to make sure that none of them use the same ID for an element, or else your masks can break in unexpected and hard-to-debug ways as some browsers get confused about which element you intended to use as a mask.

If you’re exporting your SVG from a graphics program it’s not unlikely that they’re generating IDs by the same deterministic method on every export, creating such ID collisions that you’re unaware of.

Sounds like a good time to use shadow DOM, perhaps. That could isolate your IDs… although it would complicate the style cascade...

Mildly related but very annoying. Chrome 84 (and Edge?!) has a regression related to SVG icon sprites:

https://bugs.chromium.org/p/chromium/issues/detail?id=110744...

We have fixed it by employing an old technique which inlines icons from a sprite file: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38304

Great addition by the bootstrap team. I think the lasting success of Font Awesome[0] shows that this could potentially be a revenue angle for the bootstrap team as well, in addition to the fact they just put out some great first party icons!

There is a small downside here in that they are as of this alpha release (alpha.1) svg only, so they don’t fallback to a font icon, which may or may not be desirable. I know generally SVG is preferred (in part to accessibility concerns, IIRC, as well as being easier to style and of course SVGs scale well for sizing concerns)

None the less, very impressive!

[0] https://fontawesome.com/

Now that's a coincidence... Just 5 minutes ago I was checking out the Bootstrap 5 alpha site (which is really great; just check out what it offers) and stumbled upon the Bootstrap icons project! Great stuff!

Many, many thanks to the developers!

My personal favorite icons are https://heroicons.dev . All tiny, elegant SVGs.

> Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.

Does this sentence actually refer to image icons in an implicit comparison? Or is there a lot more to SVG (for an end user who may not modify the underlying paths and design)?

I’ve been using Fontawesome for several years and my font declaration includes popularly supported font formats like WOFF2, WOFF, etc. The reason I even chose a font icon set was to easily scale and style it with CSS. It’s been working quite well for standard and common icons. Getting it cached by the browser is also easy with standard caching headers.

I'm sure that as this is developed it will get easier, but looking over the docs at the various ways to use these makes, for example, Font Awesome look like a walk in the park. The font based icon solutions using just CSS classes is fantastic not to mention it respects font sizing, colors, etc. The SVG Font Awesome components for the various front end frameworks are typically a breeze to drop in and start using as well. As it stands, going strictly off the docs regarding usage, this looks like more of a chore to use and fit in with text flow and styling.

There are components for the Bootstrap icons available for a variety of front end frameworks which make them easy to work with.

We're still stuck on FontAwesome 3 (or was it 4? The free version), so a migration stylesheet to map FA icons to BS would be helpful

Believe FA5 has (optional) css shims for version 4, even the free version. Not sure about the upcoming version 6.

Why would you need to migrate?

"Also available in Figma" -- nice touch!

Is inline SVG always the fastest way to include a handful of icons?

There’s trade offs to all approaches though that is the easiest way to use them without too many downsides. I think CSS Tricks[0] article on this does a good job explaining the different ways to use SVG

I like using the object tag for caching but it does have the downside of either having to inline style the svgs or load a style sheet separately for each one

[0]https://css-tricks.com/using-svg/

Not always, but if you want them to take over the surrounding text color, it's the only way iirc.

Here's a StackOverflow question-answer about inline vs not-inline SVG: https://stackoverflow.com/questions/23210126/inline-svg-vs-s... "Inline SVG vs SVG File Performance"

(Hint: Sometimes. Depends on how many times they are repeated (if any), and how large they are, and how often your html / css etc contents changes ...)

Oh nice. Font Awesome was getting greedy.

You're being downvoted, but I find myself mostly agreeing with you -- FontAwesome was much more open and accessible in the early years, but have now been monetizing presumably rather successfully after their $1m+ Kickstarter campaign:

https://www.kickstarter.com/projects/232193852/font-awesome-...

I guess I never really noticed in the corporate world because my old company would just pay the modest price for icon licenses, but on my own, I find myself a bit more weary to purchase a $99/year subscription just to play around with some of their nicer icons with my personal coding projects.

On the other hand, I do appreciate all the free icons they offer and how easy it is to access them!

The $99/year does cover 5 seats, so it's good value for businesses. But a cheaper plan for individual developers and designers would be appreciated.

A one-time[1] $99 fee for all of their icons is not greedy. If you had to do that work yourself you would spend a lot more just in your time alone.

[1] The Standard Pro License is perpetual, meaning that you'll still have a license if you don't renew your paid plan. You'll retain access to the last version available when your plan was active.

I do agree that getting all the awesomeness of FA for free was better, but I think that we have to agree that the quality and the scope of the project involved (and still involves) a ton of work. So it is just fair that the developer(s) of such great work is (are) remunerated for their time spent on the project.

Having this in mind, I think that FA has found a very nice equilibrium between paid and free.

Back to bootstrap, I'm impressed by their work, and this addition is yet another confirmation that the bootstrap team is awesome (pun not intended!)

Reply on news.ycombinator.com