Category Archives: UI

Possible replacement for GLYPHICONS: Font Awesome

During the last couple of months most of my interfaces were based on Twitter-Bootstrap. I was generally satisfied, it was extremely easy to use and extend, however, during my latest search for scalable GLYPHICONS this happened:

GLYPHICONS

The glyphicon-halfings coming with Twitter Bootstrap are distributed under the same license as Twitter Bootstrap itself (Apache 2.0: http://www.apache.org/licenses/LICENSE-2.0) which allows you almost everything other than removing the copyright stuff at the top of the relevant source files.

OK, so?
These icons are coming as a non-scalable png. In case if you want bigger, HUGE icons, you have to use GLYPHICONS, not the Halfings, which forces you to include the CC-BY license and the reference to glyphicons.com on every page using GLYPHICONS.

As GLYPHICONS states, it is completely free,

meaning:

Free for both personal and commercial use.

meaning:

GLYPHICONS FREE are released under the Creative Commons Attribution 3.0 Unported (CC BY 3.0). The GLYPHICONS FREE can be used both commercially and for personal use, but you must always add a link to glyphicons.com in a prominent place (e.g. the footer of a website), include the CC-BY license and the reference to glyphicons.com on every page using GLYPHICONS.

Source: http://glyphicons.com/glyphicons-licenses/

FontAwesome

You know what are Webdings, do you?

Webdings is a TrueType dingbat font developed in 1997. It was initially distributed with Internet Explorer 4.0, then as part of Core fonts for the Web, and is included in all versions of Microsoft Windows since Windows 98. Most of the glyphs have no Unicode character equivalents.

As you probably figured out, Font Awesome is actually a font, … an iconic one! Why this is so awesome? Because they will look nice and scale properly on all sizes, because… they are fonts. This basically solved all the problems arising around scaling.

What’s with the licensing?

In nutshell, you can use the Font Awesome icons without any link-back to the original site – as the original author of Font Awesome specified the level of contribution in the last point of the copyright stuff above.

Anyway, Leaving a respectful message in human.txt won’t hurt.

Stats

Finally, the numbers! (These statistics are pretty much pointless due to the fact that browser cache exists but anyway):

File FontAwesome GLYPHICONS
index.html 297 B 231 B
bootstrap.min.css 103 KB 103 KB
bootstrap-responsive.min.css 16.5 KB 16.5 KB
glyphicons-halflings.png 12.5 KB
font-awesome.min.css 15.4 KB
fontawesome-webfont.woff?v=3.0.1 28.7 KB
Total 163.89 KB 132.23 KB

My index pages look like:

for Font Awesome:

<html>
    <head>
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
        <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
    </head>
    <body>
    <h1><i class="icon-play"></i> hello!</h1>
    </body>
</html>    

for GLYPHICONS:

<html>
    <head>
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
    </head>
    <body>
    <h1><i class="icon-play"></i> hello!</h1>
    </body>
</html>