Icon fonts

Icon fonts are another toolset available to us in UI development which will provide the following benefits:

• Create icons as fonts that will be downloaded as needed
• The ability to change the attributes of an icon just like the ones we can control on fonts. Attributes like size, color, drop-shadow, etc...
• Improved performance by reducing I/O calls on heavy icon images or sprites.
• Able to add icon fonts to buttons, inputs, paragraph, anywhere fonts can be used.
• Better browser support.

Also according to font-aswesome's web site:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Let's take a look at some of the font-awesome Sass code.

Font-awesome's Sass Code

Font-awesome uses Jeckyll to build most of its assets, which the Sass portion of the product is also taking advantage of it. The file structure is as follows:

|- scss/
|--- _bordered-pulled.scss
|--- _core.scss
|--- _extras.scss
|--- _fixed-width.scss
|--- _icons.scss
|--- _larger.scss
|--- _list.scss
|--- _mixins.scss
|--- _path.scss
|--- _rotated-flipped.scss
|--- _spinning.scss
|--- _stacked.scss
|--- _variables.scss
|--- font-awesome.scss

The files that we will taking a closer look are _variables.scss and _icons.scss.

_variables.scss and _icons.scss

_variables.scss file initializes all of the variables that show the icons. The file looks like the following:

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
//$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.1.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;

$fa-var-adjust: "\f042";
$fa-var-adn: "\f170";
$fa-var-align-center: "\f037";
$fa-var-align-justify: "\f039";
$fa-var-align-left: "\f036";
$fa-var-align-right: "\f038";
$fa-var-ambulance: "\f0f9";
$fa-var-anchor: "\f13d";
$fa-var-android: "\f17b";
...

The _icons.scss is the consumer of these variables in the following manner:

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */

.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
.#{$fa-css-prefix}-music:before { content: $fa-var-music; }
.#{$fa-css-prefix}-search:before { content: $fa-var-search; }
.#{$fa-css-prefix}-envelope-o:before { content: $fa-var-envelope-o; }
.#{$fa-css-prefix}-heart:before { content: $fa-var-heart; }
.#{$fa-css-prefix}-star:before { content: $fa-var-star; }
.#{$fa-css-prefix}-star-o:before { content: $fa-var-star-o; }
.#{$fa-css-prefix}-user:before { content: $fa-var-user; }
.#{$fa-css-prefix}-film:before { content: $fa-var-film; }
.#{$fa-css-prefix}-th-large:before { content: $fa-var-th-large; }
.#{$fa-css-prefix}-th:before { content: $fa-var-th; }
...

With some of the Sass tools that we have learned, we can better organize and optimize this code.