Hi,
I'm keen to explore the potential use of a new icon font set in the Adapt Theme. Something that looks a bit fresher and is updated regularly with new icons.
Does anyone have any suggestions of icon font sets they've used before or like?
Thanks,
Guy
Hello Guy,
what do you think about using inline SVG's instead of icon fonts?
SVG gives you more control about styling. You could have multi-colored icons or animate parts of it. They are also independent from screen resolution. I think SVG's would make customization's also a bit more easier, as you can replace the svg directly inside the template or overwrite the svg-sprite.
Icon Fonts can become very large and browser must load the entire file.
Cheers
Thomas
Icon Fonts can become very large and browser must load the entire file
There's also a big problem if the learner's network has a block on web fonts*. When fonts are used for text that's not a problem as the 'fallback font(s)' will kick in - but the icon font being blocked is incredibly hard to work around.
I'm with Thomas on this one - SVG icons FtW!
*this happens more often than you'd think
There is a small issue with the number of additional network requests this could generate.
I would suggest sticking with font files by default in Adapt and adding architectural support for SVGs. Being able to use icons in an identical way in the LESS (with a singular API) regardless of their source. So icon-tick could come from either svg or fontfile depending on your needs.
We can then use SVGs in Matt's font error situation and in Thomas' animation situation, but those use-cases will still remain edge cases rather than the norm. Swapping between to those two types could become relatively easy as the font declaration API would allow you to delete one set and immediately replace it with another.
http/2 over tls would make the request overhead relatively meaningless, but that entirely depends on the server infrastructure now
the number of additional network requests this could generate
Do you have an idea of how many additional network requests that would be?
It'll be 1 request per icon with svgs. At the moment we load 90+ icons in 1 font file request, admittedly we don't use them all. To put it into perspective, loading the entire default Adapt course and browsing all of the pages uses about 64 http requests.
It's probably not going to make much difference but it may well double the request count. That will have a loading impact on slower devices or devices with high latency connections.
admittedly we don't use them all
Indeed not, a very rough count of those in the default Adapt course suggests it's only using about 20. But if it's possible to have both options available then that seems like a good way forward.
You only have 1 request per SVG if you load the icon as an image, eg background-image: url(foo.svg)
If you inline it in the html content, there are no additional requests. There are fancy workaround for using some sort of SVG sprite sheets where you define all your icons and then use <use> to reference the icon from the content. Less would then only be used to style the SVG-DOM. This could further be abstracted with handlebars helper or VUE componentes / directives ... or what ever fancy library will be used in the future ...
https://css-tricks.com/svg-sprites-use-better-icon-fonts/
I think IE is a bit buggy, but there are workarounds.
