Products

Solutions

Learn More

Partners

Community

Blog

About

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Welcome Font Awesome 5 - The Free Font that made 1 Mln on Kickstarter

Font Awesome 5 was just released today. But it's much more than just an icon-font - here's what you need to know.

Icon-Fonts use has Changed

I believe we've all worked with icon-fonts, and after an initial learning curve we kind of figured it out. But the web has changed a lot since then, and needs changed.

8 Problems we had with old-style icon-fonts

  1. Glyphicons - the famous icon-pack included in Bootstrap 3 (but not BS4) always needed 2 classes to add, so you had to create a <span class="glyphicons glyphicons-up"> to make it work. That is still common today, though it's just an unecessary hassle, thanks to now widely supported CSS3.
  2. Font-packs grew larger and larger, and suddenly started slowing down websites which needed only 5 icons, but always downloaded the font with 2'000 icons
  3. Font-icons were an important solution to "bundle" small icons together, because many small requests slowed down the page dramatically. But this is becoming obsolete, thanks to HTTP2.
  4. Every icon-font was always missing 1-2 icons, so people would start using multiple libraries, slowing down the site even more, and causing various issues like icon-class-name collisions
  5. When using icon-fonts with screen readers, this cause issues because internally the icon was just a cryptic, japanese or mongolian character number, which the screen reader couldn't interpret.
  6. When using icon-fonts in desktop solutions (Photoshop, Illustrator, etc.) it was very hard to pick an icon, because they didn't have ligatures (nice names)
  7. As online typography matured, many new needs arose like professionally created bold-styles (so no the crapy just-make-the-line-thicker stuff)
  8. As screens got better, small icons looked bad on high res, and high-res icons looked bad in tiny scenarios.

JavaScript Automation Changes Needs

JavaScript automation (incl. Webpack, Gulp, Angular-CLI etc.) changed the way developers solve problems:

  1. we now want to package our own custom icons-fonts at dev time (making smaller, custom icon libraries)
  2. in many scenarios we prefer SVG icons to font-icons
  3. ...and SVGs can also be included in a compact SPA JavaScript, further reducing the need for more server requests and creating single-file deployment solutions

Font Awesome 5 for 1'000'000 USD

That's right: the most popular, free icon-library raised one Million dollars on kickstarter to fix all these things, and open-source all the tools they developed in the process. How awesome is that? Here's the link BTW.

So what did they do that is so awesome?

  1. they designed all icons in a top-notch manner, providing every icon in the correct typographic version incl. solid, regular, light etc.
  2. they added ligatures to all icons, so that screen-readers (accessibility) and desktop-designers could finally use them in the right way
  3. provide everything in font-format, as well as SVG
  4. created an open-source JavaScript framework to use svg-icons the same way you would use font-icons, allowing us to bundle it into existing solutions
  5. gave us all a free CDN for people who want to use the whole font
  6. ...and way more

Kudos to the FontAwesome team 

You did an amazing job, and open-sourcing your work will help other fonts to quickly achieve a similar level of professionality. You guys rock!

Love from Switzerland,
Daniel

PS: Read more about font-icons in our blog posts.


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (101)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (165)
Daniel Valadas (25)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (79)
Francisco Perez Andres (12)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (1)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (35)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (172)
William Severance (5)

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  

What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out