SVG font for iconography

Quick exploration of icon svg fonts for rapidly generating iconography in graphs. See the examples live on bl.ocks

Icon class

This is the standard solution. The one adopted by popular icon fonts like font awesome.

Each icon is mapped onto a unique unicode character.

<i class="icon-cycle_annual">&#xe064</i>

As it is pretty impossible to remember the mapping between each icon and its associated unicode character, they are declared in the css file.

.icon-cycle_annual:before { content: '\e064'; }

Tools like svg-font-create manage the automatic generation of the css mapping whenever a new font is generated.

Example

<i class="icon-cycle_annual"></i> <i class="icon-cycle_biennial"></i> <i class="icon-cycle_perennial"></i> 

Icon text##

Not clear wether this is legit or not, but it is possible to declare more than one character in the unicode attribute.

A benefit of this is that it is then possible to bypass the declaration of the glyph-to-code mapping in the css file.

Two downsides, though.

1. Character replacement operates by finding the first sequence of character that matches any code. If two entries start with the same string, then both sequences will be replaced with the same glyph. Let’s say you have bar and barman, bar will be replaced with the “bar” glyph in both cases. To avoid this, it is best to embed each code into some markup, {bar} and {barman}.
2. If text is embedded that doesn’t match any glyph code, the text will show as text (though this could alternatively be helpful in some use cases).

Example

<i class="icon-cycle">{annual}</i> <i class="icon-cycle">{biennial}</i> <i class="icon-cycle">{perennial}</i>

Span text

Once we decide to use multiletter codes for glyph identification, there is no real motivation for using the custom tag anymore. Codes can be embedded in any span or division with limited markup.

Useful or dangerous?

Example

<span class="font-test">{annual} {biennial} {perennial}</span>