/*** Fonts ***/

@font-face {
  font-family: 'glyph';
  src: url('icomoon.woff') format('woff'),
       url('icomoon.ttf') format('truetype'),
       url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'glyph';
  src: url('icomoon-bold.woff') format('woff'),
       url('icomoon-bold.ttf') format('truetype'),
       url('icomoon-bold.svg#icomoon') format('svg');
  font-weight: bold;
  font-style: normal;
}

/*** Glyph ***/

/* new technic to set icons, using data attribute */
/* seems to not be a performance issue, because with classes, browser also have to explore the entire tree */
[data-glyph]:before , [data-glyph]:after { display: inline; font-family: glyph; font-style: normal; speak: none; text-transform: none; line-height: 1; }

/* 
  it is easy to convert unicode to html entities 
  - CSS Unicode: \unicode 
  - HTML entity: &#xunicode;
*/
/* magic technic, with HTML characters */
[data-glyph]:before { content: attr(data-glyph); }

/* named glyph */
[data-glyph="xxxx"]:before { content: "\xxxx"; }