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).
“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).”
tobr 1358 days ago [-]
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.
thomasqbrady 1353 days ago [-]
Sounds like a good time to use shadow DOM, perhaps. That could isolate your IDs… although it would complicate the style cascade...
leipert 1358 days ago [-]
Mildly related but very annoying. Chrome 84 (and Edge?!) has a regression related to SVG icon sprites:
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)
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!
> 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.
jonquest 1358 days ago [-]
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.
tssva 1358 days ago [-]
There are components for the Bootstrap icons available for a variety of front end frameworks which make them easy to work with.
julianlam 1358 days ago [-]
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
jonquest 1358 days ago [-]
Believe FA5 has (optional) css shims for version 4, even the free version. Not sure about the upcoming version 6.
Too 1357 days ago [-]
Why would you need to migrate?
mikece 1358 days ago [-]
"Also available in Figma" -- nice touch!
fareesh 1358 days ago [-]
Is inline SVG always the fastest way to include a handful of icons?
(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 ...)
no_wizard 1358 days ago [-]
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
Not always, but if you want them to take over the surrounding text color, it's the only way iirc.
nicc 1358 days ago [-]
Seems a huge pain to use, compared to FA.
bzb3 1358 days ago [-]
Oh nice. Font Awesome was getting greedy.
dmlittle 1358 days ago [-]
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.
ghego1 1357 days ago [-]
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!)
harrydehal 1358 days ago [-]
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:
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!
PixyMisa 1357 days ago [-]
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.
Rendered at 12:39:57 GMT+0000 (Coordinated Universal Time) with Vercel.
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).”
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.
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
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/
Many, many thanks to the developers!
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.
(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 ...)
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/
[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.
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!)
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!