Skip to content

Instantly share code, notes, and snippets.

@widged

widged/Readme.md

Last active January 3, 2016 07:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save widged/8429378 to your computer and use it in GitHub Desktop.
Save widged/8429378 to your computer and use it in GitHub Desktop.
Download ZIP
Multicharacter codes in svg fonts
Raw
Readme.md

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>
Display the source blob
Display the rendered blob
Raw
cycle.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
icon-font.css
@font-face {
font-family: 'cycle-s';
src: url('cycle.svg?36049112#cycle-s') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cycle';
src: url('cycle.svg?36049112#cycle') format('svg');
font-weight: normal;
font-style: normal;
}
.font-test {
display: inline-block;
}
.font-test, .icon-cycle {
font-family: "cycle-s";
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "cycle";
}
.font-test, .icon-cycle, [class^="icon-"]:before, [class*=" icon-"]:before {
font-style: normal;
font-weight: normal;
font-size: 160%;
speak: none;
/* vertical mirror */
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(-1, 1);
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
}
.icon-cycle, [class^="icon-"]:before, [class*=" icon-"]:before {
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
}
Raw
icon-mapping.css
.icon-cycle_annual:before { content: '\e064'; } /* '' */
.icon-cycle_biennial:before { content: '\e065'; } /* '' */
.icon-cycle_perennial:before { content: '\e066'; } /* '' */
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG font</title>
<style type="text/css">
@import url("icon-font.css");
@import url("icon-mapping.css");
</style>
</head>
<body>
<h1>SVG font for iconography</h1>
<h2><i>Example.</i> Icon class</h2>
<div>
<i class="icon-cycle_annual"></i> <i class="icon-cycle_biennial"></i> <i class="icon-cycle_perennial"></i>
</div>
<div>
<code><pre>&lt;i class=&quot;icon-cycle_annual&quot;&gt;&lt;/i&gt; &lt;i class=&quot;icon-cycle_biennial&quot;&gt;&lt;/i&gt; &lt;i class=&quot;icon-cycle_perennial&quot;&gt;&lt;/i&gt; </pre></code>
</div>
<h2><i>Example.</i> Icon text</h2>
<div>
<i class="icon-cycle">{annual}</i> <i class="icon-cycle">{biennial}</i> <i class="icon-cycle">{perennial}</i>
</div>
<div>
<code><pre>&lt;i class=&quot;icon-cycle&quot;&gt;{annual}&lt;/i&gt; &lt;i class=&quot;icon-cycle&quot;&gt;{biennial}&lt;/i&gt; &lt;i class=&quot;icon-cycle&quot;&gt;{perennial}&lt;/i&gt;</pre></code>
</div>
<h2><i>Example.</i> Span text</h2>
<div>
<span class="font-test">{annual} {biennial} {perennial}</span>
</div>
<div>
<code><pre>&lt;span class=&quot;font-test&quot;&gt;{annual} {biennial} {perennial}&lt;/span&gt;</pre></code>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment