I have been using font-awesome for a number of years. Everything changes, should I change on this item of tech?

Objectives

  • A way to have icons in a web app; which do not have high management overheads.
  • A way not to have a big list of HTTP requests
  • A way to have all icons in the same visual/drawing style (i.e. I want a palette by same author)
  • A way for things not to look jaggedy (i.e. Vector formats)
  • if using sprite blitzing, must be simple to drive (no hand defined pixel offsets)

Contenders:

  • Font awesome 1 (AFAIK, the first one). This has ~4,000 glyphs as a free product, and ~8,000 as paid. This is a font encoded in several formats, and a CSS style sheet to apply singular UTF8 glyphs via CSS :after :content. This is a corporate product, with a freemium version; not open source. Claims to have 38% of market for 3rd party fonts 2
    • good as: fairly easy to use.
    • bad as: quite a large download (particularly when using 2-3 symbols). I have never worked at a company with a large enough tech budget to get the logo in the project.
  • Iconspedia 3 is a big catalogue of icons. Apply images to your brochure/app with an IMG element.
    • good as: much easier search tools, most items are free to use
    • bad as: they are PNG/ICO, not vector, many of these are separate images, not a structure
  • Fontisto 4 git , totals ~600 icons, is OSS, MIT licence.
    • good as: is open source, same idea as FA, but is XX download
    • bad as: only 600 odd icons
  • Fontello 5 git. A tool to select glyphs from other open source fonts, and make a new individual font.
    • good as: will lead to small downloads. Allows joining several other libraries, or your own SVG drawing.
    • bad as: ? um ?
  • icons8 6 git. This is opensource, but a payfor service.
    • good as: These are in colour. The iOS set is OK design.
    • bad as: Pay for. OSS version is only 312 icons; last update was three years ago.
  • frIconix 7 Got seriously put off by Quantcast cookie banner, stopped looking.

Fontello Results

I have successfully applied Fontello to this website. Fontello is fairly easy to use, but the search tool isn't the obvious to first time users. You can't use “find in page”, which is how I drive the FA cheat-sheet. It easily makes a zip of your selected glyphs, in a full range of font encodings. The zip also includes CSS to use the fonts (similar to font-awesome.css). The CSS has a “font-" prefix, rather than the FA prefix of “fa-"; as an architecture this is good, so you can use both without clash; but as a drop in replacement, this is bad.
PLEASE NOTE: the css changes all icons ending in “square” to “squared”. I edited it back to “square” in my copy.
In the same change, I swapped the burger menu glyph for a better one [IMO], which I edited first. The process of applying a glyph to Fontello is awkward as it will only accept a narrow subset of SVG for a new glyph. I can't find where the constraints are documented, so the process is “iterate until no Errors”. Drawing an SVG in a diagram tool seems to be a complete failure. Using fontforge 8 works better, but still has some warnings. My first ambition for this was to be able to import BW company logos. Due to “iterate until no errors”, I'm not sure this is ready for timed dev.
I swapped the FA css in my build script for the new Fontello css; and recompiled. It is not surprising that the same font technology works in all my available test browsers (Chrome/linux, FF/linux, opera/linux, chrome/win32, FF/win32, Edge/win32, MSIE11/win32). In terms of user experience, this is not conspicuous; but it will load faster. This is important if you are trying to read this site whilst the tube and underground.
Concurrently to this change, I upgraded my general font CSS to favour WOFF2, then WOFF; so all the fonts should load faster, as smaller files.

Conclusion

My search process hasn't showed up my alternative technology at all. This seems wrong. I have applied Fontello; see above paragraph for details.

There are quite a few iconsets 9, but without the smarts to convert the big panel to singular images on screen; this is limited value.

Some similar articles in images