/ - Diff - Synnefo - Greek Research and Technology Network's projects

     <!doctype html>
     <html>
     <head>
     <title>snf-font-1</title>
     <link rel="stylesheet" href="stylesheets/font_custom.css" />
     <!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
     <style>
     	section, header, footer {display: block; overflow: hidden;}
     	body {
     		font-family: sans-serif;
     		color: #444;
     		line-height: 1.5;
     		font-size: 1em;
+    	}
     	* {
     		-moz-box-sizing: border-box;
     		-webkit-box-sizing: border-box;
     		box-sizing: border-box;
     		margin: 0;
     		padding: 0;
+    	}
     	.glyph {
     		font-size: 14px;
     		float: left;
     		text-align: center;
     		background: #eee;
     		padding: .75em;
     		margin: .75em 1.5em .75em 1px;
     		width: 7.5em;
     		border-radius: .25em;
     		box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
+    	}
     	.glyph input {
     		font-family: consolas, monospace;
     		font-size: 13px;
     		width: 100%;
     		text-align: center;
     		border: 0;
     		box-shadow: 0 0 0 1px #ccc;
     		padding: .125em;
+    	}
     	.w-main {
     		width: 80%;
+    	}
     	.centered {
     		margin-left: auto;
     		margin-right: auto;
+    	}
     	.fs1 {
     		font-size: 2em;
     		color: rgb(71, 176, 233);
+    	}
     	header {
     		margin: 2em 0;
     		padding-bottom: .5em;
     		color: #666;
     		box-shadow: 0 2px #eee;
+    	}
     	header h1 {
     		font-size: 2em;
     		font-weight: normal;
+    	}
     	.clearfix:before, .clearfix:after { content: ""; display: table; }
     	.clearfix:after, .clear { clear: both; }
     	footer {
     		margin-top: 2em;
     		padding: .5em 0;
     		box-shadow: 0 -2px #eee;
+    	}
     	a, a:visited {
     		color: #B35047;
     		text-decoration: none;
+    	}
     	a:hover, a:focus {color: #000;}
     	.box1 {
     		font-size: 14px;
     		display: inline-block;
     		width: 15em;
     		padding: .25em .5em;
     		background: #eee;
     		margin: .5em 1em .5em 0;
+    	}
     	.general {
     		font-weight: bold;
+    	}
     	h1, h2 {
     		color: #666;
     		font-weight: normal;
+    	}
     	.note {
     		font-style: italic;
+    	}
     	section ul {
     		list-style-type:circle;
     		margin: 18px;
+    	}
     	p {
     		font-size: 14px;
+    	}
     </style>
     </head>
     <body>
     	<div class="w-main centered">
     	<section class="mtm clearfix" id="glyphs">
     	<header>
     		<h1>Icons included in snf-font-1</h1>
     	</header>
     	<section>
     		<h2>checkboxes</h2>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="a"></div>
     			<input type="text" readonly="readonly" value="a" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="b"></div>
     			<input type="text" readonly="readonly" value="b" />
     		</div>
     	</section>
     	<section>
     		<h2>close - cancel - remove</h2>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="c"></div>
     			<input type="text" readonly="readonly" value="c" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="m"></div>
     			<input type="text" readonly="readonly" value="m" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="d"></div>
     			<input type="text" readonly="readonly" value="d" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="e"></div>
     			<input type="text" readonly="readonly" value="e" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="f"></div>
     			<input type="text" readonly="readonly" value="f" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="i"></div>
     			<input type="text" readonly="readonly" value="i" />
     		</div>
     		<div class="glyph">
     		<div class="fs1" aria-hidden="true" data-icon="j"></div>
     		<input type="text" readonly="readonly" value="j" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="n"></div>
     			<input type="text" readonly="readonly" value="n" />
     		</div>
     	</section>
     	<section>
     		<h2>ok - confirm</h2>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="l"></div>
     			<input type="text" readonly="readonly" value="l" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="k"></div>
     			<input type="text" readonly="readonly" value="k" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="h"></div>
     			<input type="text" readonly="readonly" value="h" />
     		</div>
     	</section>
     	<section>
     		<h2>edit</h2>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="o"></div>
     			<input type="text" readonly="readonly" value="o" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="p"></div>
     			<input type="text" readonly="readonly" value="p" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="q"></div>
     			<input type="text" readonly="readonly" value="q" />
     		</div>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="r"></div>
     			<input type="text" readonly="readonly" value="r" />
     		</div>
     	</section>
     	<section>
     		<h2>twitter</h2>
     		<div class="glyph">
     			<div class="fs1" aria-hidden="true" data-icon="g"></div>
     			<input type="text" readonly="readonly" value="g" />
     		</div>
     	</section>
     	<div class="clear"></div>
     	<section class="mtm clearfix" id="glyphs">
     	<header>
     		<h1>Class Names</h1>
     	</header>
     	<span class="box1 general">
     		<span aria-hidden="true" class="snf-twitter-off-black"></span>
     		&nbsp;snf-font
     	</span>
     	<span class="box1 general">
     		<span aria-hidden="true" class="snf-checkbox-checked"></span>
     		&nbsp;snf-custom-checkbox
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-checkbox-checked"></span>
     		&nbsp;snf-checkbox-checked
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-checkbox-unchecked"></span>
     		&nbsp;snf-checkbox-unchecked
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-twitter-off-black"></span>
     		&nbsp;snf-twitter-off-black
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-cancel-circled"></span>
     		&nbsp;snf-cancel-circled
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-cancel-circled2"></span>
     		&nbsp;snf-cancel-circled2
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-cancel-circled-outline"></span>
     		&nbsp;snf-cancel-circled-outline
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-cancel-outline"></span>
     		&nbsp;snf-cancel-outline
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-ok"></span>
     		&nbsp;snf-ok
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-remove"></span>
     		&nbsp;snf-remove
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-ban-circle"></span>
     		&nbsp;snf-ban-circle
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-ok-circle"></span>
     		&nbsp;snf-ok-circle
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-ok-sign"></span>
     		&nbsp;snf-ok-sign
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-remove-sign"></span>
     		&nbsp;snf-remove-sign
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-minus-sign"></span>
     		&nbsp;snf-minus-sign
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-pencil"></span>
     		&nbsp;snf-pencil
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-edit"></span>
     		&nbsp;snf-edit
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-edit-1"></span>
     		&nbsp;snf-edit-1
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="snf-pencil-circled"></span>
     		&nbsp;snf-pencil-circled
     	</span>
     	</section>
     	<header>
     		<h1>Usage Example</h1>
     	</header>
     	<section>
     		<p><code>
     			&lt;span class="snf-font"&gt;o&lt;/span&gt; => <span class="snf-font">o</span>
     		</code></p>
     		<p>Remember is case-sensitive: <code>
     			&lt;span class="snf-font"&gt;O&lt;/span&gt; => <span class="snf-font">O</span></code> (this is capital "O" with different style)
     		</p>
     	</section>
     	<header>
     		<h1> Missing Icons from snf-font (or not final yet)</h1>
     	</header>
     	<section>
     		<ul>
     			<li class="box1">pithos icon</li>
     			<li class="box1">disk icon</li>
     			<li class="box1">vm icon</li>
     			<li class="box1">network icon</li>
     			<li class="box1">keys? icon</li>
     			<li class="box1">ips icon</li>
     			<li class="box1">folder icon</li>
     			<li class="box1">pdf icon</li>
     			<li class="box1">txt icon</li>
     			<li class="box1">xls icon</li>
     			<li class="box1">doc icon</li>
     			<li class="box1">audio file icon</li>
     			<li class="box1">video file icon</li>
     			<li class="box1">image icon</li>
     			<li class="box1">trash icon</li>
     			<li class="box1">download icon</li>
     			<li class="box1">delete icon</li>
     			<li class="box1">move? icon</li>
     			<li class="box1">get link? icon</li>
     			<li class="box1">preview icon</li>
     			<li class="box1">close icon <span class="note">(not final)</span ></li>
     			<li class="box1">checkbox icon <span class="note">(not final)</span></li>
     			<li  class="box1">edit icon <span class="note">(not final)</span></li>
     			<li class="box1">cancel edit icon <span class="note">(not final)</span></li>
     		</ul>
     	</section>
     </body>
     </html>

      	<div class="row">
      			<h2>Misc</h2>
      			<ul>
      				<li><a href="testIconFonts/test.html">Sample page for Icon-Font</a></li>
      				<li><a href="icon_guide.html">Info about Icon-Font</a></li>
      			</ul>
      			<h2>Kpal original designs</h2>

/dev/null

1

To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file.

2

3

See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face

     <?xml version="1.0" standalone="no"?>
     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
     <svg xmlns="http://www.w3.org/2000/svg">
     <metadata>
     This is a custom SVG font generated by IcoMoon.
     <iconset grid="16"></iconset>
     </metadata>
     <defs>
     <font id="test1" horiz-adv-x="512" >
     <font-face units-per-em="512" ascent="480" descent="-32" />
     <missing-glyph horiz-adv-x="512" />
     <glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
     <glyph unicode="&#x61;" d="M 568.86,400.441c-20.85-9.244-43.406-15.588-66.958-18.375c 24.007,14.393, 42.61,37.319, 51.456,64.597
     						c-22.784-13.34-47.73-23.097-74.155-28.331C 457.785,441.003, 427.435,455.253, 394.012,455.253c-64.597,0-116.736-52.366-116.736-116.736
     						c0-9.159, 0.882-18.091, 2.958-26.624c-96.996,4.779-182.898,51.342-240.583,121.884C 29.639,416.569, 23.865,396.487, 23.865,375.154
     						c0-40.505, 20.622-76.26, 51.996-97.081C 56.633,278.556, 38.571,283.847, 22.869,292.636c0-0.597,0-0.939,0-1.536
     						c0-56.405, 40.306-103.708, 93.668-114.432C 106.724,173.995, 96.484,172.601, 85.732,172.601c-7.538,0-14.763,0.654-21.931,1.991
     						c 14.82-46.279, 57.941-80.043, 108.999-81.010c-39.822-31.403-90.169-49.892-144.953-49.892c-9.273,0-18.716,0.569-27.847,1.564
     						c 51.712-33.052, 113.124-52.565, 179.029-52.565c 214.613,0, 332.004,178.005, 332.004,332.203c0,5.092-0.171,10.069-0.341,15.047
     						C 533.504,356.523, 553.188,377.060, 568.86,400.441z" horiz-adv-x="568.889" data-tags="twitter-off-black" />
     <glyph unicode="&#x62;" d="M 96-32L 416-32L 448,320L 64,320 	zM 320,416L 320,480 L 192,480 l0-64 L 32,416 l0-96 l 32,32l 384,0 l 32-32L 480,416 L 320,416 z M 288,416l-64,0 L 224,448 l 64,0 L 288,416 z" data-tags="remove, delete, trashcan, recycle bin, bin, dispose" />
     <glyph unicode="&#x63;" d="M 434.432-17.792c-7.851,17.721-13.262,36.892-15.616,56.917c 12.231-20.409, 31.716-36.231, 54.912-43.733
     						c-11.335,19.371-19.62,40.569-24.078,63.033C 468.907,76.622, 481.017,102.414, 481.017,130.83c0,54.912-44.516,99.228-99.228,99.228
     						c-7.772,0, -15.374-0.754, -22.628-2.517c 4.075,82.446 43.634,155.463 103.602,204.487C 448.135,440.548, 431.054,445.454, 412.921,445.454
     						c-34.432,0, -64.825-17.522, -82.517-44.196C 330.823,417.593, 335.317,432.953, 342.798,446.293c-0.512,0,-0.796,0,-1.308,0
     						c-47.943,0, -88.149-34.261, -97.266-79.616C 241.948,375.026, 240.768,383.73, 240.768,392.86c0,6.4 0.555,12.544 1.692,18.645
     						c -39.339-12.601, -68.039-49.252, -68.857-92.644c-26.695,33.849-42.411,76.644-42.411,123.207c0,7.879 0.484,15.922 1.323,23.666
     						c -28.089-43.954, -44.679-96.156, -44.679-152.178c 0-182.414, 151.31-282.197, 282.368-282.197c 4.324,0 8.562,0.142 12.786,0.277
     						C 397.099,12.26, 414.549-4.466, 434.432-17.792z" horiz-adv-x="568.889" data-tags="twitter-off-black" />
     <glyph unicode="&#x20;" horiz-adv-x="256" />
     </font></defs></svg>

     <?xml version="1.0" standalone="no"?>
     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
     <svg xmlns="http://www.w3.org/2000/svg">
     <metadata>
     This is a custom SVG font generated by IcoMoon.
     <iconset grid="16"></iconset>
     </metadata>
     <defs>
     <font id="test1" horiz-adv-x="512" >
     <font-face units-per-em="512" ascent="480" descent="-32" />
     <missing-glyph horiz-adv-x="512" />
     <glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
     <glyph unicode="&#x61;" d="M 568.86,400.441c-20.85-9.244-43.406-15.588-66.958-18.375c 24.007,14.393, 42.61,37.319, 51.456,64.597
     						c-22.784-13.34-47.73-23.097-74.155-28.331C 457.785,441.003, 427.435,455.253, 394.012,455.253c-64.597,0-116.736-52.366-116.736-116.736
     						c0-9.159, 0.882-18.091, 2.958-26.624c-96.996,4.779-182.898,51.342-240.583,121.884C 29.639,416.569, 23.865,396.487, 23.865,375.154
     						c0-40.505, 20.622-76.26, 51.996-97.081C 56.633,278.556, 38.571,283.847, 22.869,292.636c0-0.597,0-0.939,0-1.536
     						c0-56.405, 40.306-103.708, 93.668-114.432C 106.724,173.995, 96.484,172.601, 85.732,172.601c-7.538,0-14.763,0.654-21.931,1.991
     						c 14.82-46.279, 57.941-80.043, 108.999-81.010c-39.822-31.403-90.169-49.892-144.953-49.892c-9.273,0-18.716,0.569-27.847,1.564
     						c 51.712-33.052, 113.124-52.565, 179.029-52.565c 214.613,0, 332.004,178.005, 332.004,332.203c0,5.092-0.171,10.069-0.341,15.047
     						C 533.504,356.523, 553.188,377.060, 568.86,400.441z" horiz-adv-x="568.889"  />
     <glyph unicode="&#x62;" d="M 96-32L 416-32L 448,320L 64,320 	zM 320,416L 320,480 L 192,480 l0-64 L 32,416 l0-96 l 32,32l 384,0 l 32-32L 480,416 L 320,416 z M 288,416l-64,0 L 224,448 l 64,0 L 288,416 z"  />
     <glyph unicode="&#x63;" d="M 434.432-17.792c-7.851,17.721-13.262,36.892-15.616,56.917c 12.231-20.409, 31.716-36.231, 54.912-43.733
     						c-11.335,19.371-19.62,40.569-24.078,63.033C 468.907,76.622, 481.017,102.414, 481.017,130.83c0,54.912-44.516,99.228-99.228,99.228
     						c-7.772,0, -15.374-0.754, -22.628-2.517c 4.075,82.446 43.634,155.463 103.602,204.487C 448.135,440.548, 431.054,445.454, 412.921,445.454
     						c-34.432,0, -64.825-17.522, -82.517-44.196C 330.823,417.593, 335.317,432.953, 342.798,446.293c-0.512,0,-0.796,0,-1.308,0
     						c-47.943,0, -88.149-34.261, -97.266-79.616C 241.948,375.026, 240.768,383.73, 240.768,392.86c0,6.4 0.555,12.544 1.692,18.645
     						c -39.339-12.601, -68.039-49.252, -68.857-92.644c-26.695,33.849-42.411,76.644-42.411,123.207c0,7.879 0.484,15.922 1.323,23.666
     						c -28.089-43.954, -44.679-96.156, -44.679-152.178c 0-182.414, 151.31-282.197, 282.368-282.197c 4.324,0 8.562,0.142 12.786,0.277
     						C 397.099,12.26, 414.549-4.466, 434.432-17.792z" horiz-adv-x="568.889"  />
     <glyph unicode="&#x20;" horiz-adv-x="256" />
     </font></defs></svg>

     <!doctype html>
     <html>
     <head>
     <title>Your Font/Glyphs</title>
     <link rel="stylesheet" href="style.css" />
     <!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
     <style>
     	section, header, footer {display: block;}
     	body {
     		font-family: sans-serif;
     		color: #444;
     		line-height: 1.5;
     		font-size: 1em;
+    	}
     	* {
     		-moz-box-sizing: border-box;
     		-webkit-box-sizing: border-box;
     		box-sizing: border-box;
     		margin: 0;
     		padding: 0;
+    	}
     	.glyph {
     		font-size: 16px;
     		float: left;
     		text-align: center;
     		background: #eee;
     		padding: .75em;
     		margin: .75em 1.5em .75em 0;
     		width: 7.5em;
     		border-radius: .25em;
     		box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
+    	}
     	.glyph input {
     		font-family: consolas, monospace;
     		font-size: 13px;
     		width: 100%;
     		text-align: center;
     		border: 0;
     		box-shadow: 0 0 0 1px #ccc;
     		padding: .125em;
+    	}
     	.w-main {
     		width: 80%;
+    	}
     	.centered {
     		margin-left: auto;
     		margin-right: auto;
+    	}
     	.fs1 {
     		font-size: 2em;
+    	}
     	header {
     		margin: 2em 0;
     		padding-bottom: .5em;
     		color: #666;
     		box-shadow: 0 2px #eee;
+    	}
     	header h1 {
     		font-size: 2em;
     		font-weight: normal;
+    	}
     	.clearfix:before, .clearfix:after { content: ""; display: table; }
     	.clearfix:after, .clear { clear: both; }
     	footer {
     		margin-top: 2em;
     		padding: .5em 0;
     		box-shadow: 0 -2px #eee;
+    	}
     	a, a:visited {
     		color: #B35047;
     		text-decoration: none;
+    	}
     	a:hover, a:focus {color: #000;}
     	.box1 {
     		font-size: 16px;
     		display: inline-block;
     		width: 15em;
     		padding: .25em .5em;
     		background: #eee;
     		margin: .5em 1em .5em 0;
+    	}
     </style>
     </head>
     <body>
     	<div class="w-main centered">
     	<section class="mtm clearfix" id="glyphs">
     	<header>
     		<h1>Your font contains the following glyphs</h1>
     		<p>The generated SVG font can be imported back to <a href="http://icomoon.io/app">IcoMoon</a> for modification.</p>
     	</header>
     	<div class="glyph">
     		<div class="fs1" aria-hidden="true" data-icon="&#x61;"></div>
     		<input type="text" readonly="readonly" value="&amp;#x61;" />
     	</div>
     	<div class="glyph">
     		<div class="fs1" aria-hidden="true" data-icon="&#x62;"></div>
     		<input type="text" readonly="readonly" value="&amp;#x62;" />
     	</div>
     	<div class="glyph">
     		<div class="fs1" aria-hidden="true" data-icon="&#x63;"></div>
     		<input type="text" readonly="readonly" value="&amp;#x63;" />
     	</div>
     	</section>
     	<div class="clear"></div>
     	<section class="mtm clearfix" id="glyphs">
     	<header>
     		<h1>Class Names</h1>
     	</header>
     	<span class="box1">
     		<span aria-hidden="true" class="icon-twitter-off-black"></span>
     		&nbsp;icon-twitter-off-black
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="icon-remove"></span>
     		&nbsp;icon-remove
     	</span>
     	<span class="box1">
     		<span aria-hidden="true" class="icon-twitter-off-black-2"></span>
     		&nbsp;icon-twitter-off-black-2
     	</span>
     	</section>
     	<footer>
     		<p>Generated by <a href="http://icomoon.io">IcoMoon.io</a></p>
     	</footer>
     	</div>
     	<script>
     	document.getElementById("glyphs").addEventListener("click", function(e) {
     		var target = e.target;
     		if (target.tagName === "INPUT") {
     			target.select();
+    		}
     	});
     	</script>
     </body>
     </html>

/dev/null
1		Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/
2		License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/

     /* Load this script using conditional IE comments if you need to support IE 7 and IE 6. */
     window.onload = function() {
     	function addIcon(el, entity) {
     		var html = el.innerHTML;
     		el.innerHTML = '<span style="font-family: \'test1\'">' + entity + '</span>' + html;
+    	}
     	var icons = {
     			'icon-twitter-off-black' : '&#x61;',
     			'icon-remove' : '&#x62;',
     			'icon-twitter-off-black-2' : '&#x63;'
     		},
     		els = document.getElementsByTagName('*'),
     		i, attr, html, c, el;
     	for (i = 0; ; i += 1) {
     		el = els[i];
     		if(!el) {
     			break;
+    		}
     		attr = el.getAttribute('data-icon');
     		if (attr) {
     			addIcon(el, attr);
+    		}
     		c = el.className;
     		c = c.match(/icon-[^\s'"]+/);
     		if (c && icons[c[0]]) {
     			addIcon(el, icons[c[0]]);
+    		}
+    	}
     };

     @font-face {
     	font-family: 'test1';
     	src:url('fonts/test1.eot');
+    }
     @font-face {
     	font-family: 'test1';
     	src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),
     		 url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
     	font-weight: normal;
     	font-style: normal;
+    }
     /* Use the following CSS code if you want to use data attributes for inserting your icons */
     [data-icon]:before {
     	font-family: 'test1';
     	content: attr(data-icon);
     	speak: none;
     	font-weight: normal;
     	font-variant: normal;
     	text-transform: none;
     	line-height: 1;
     	-webkit-font-smoothing: antialiased;
+    }
     /* Use the following CSS code if you want to have a class per icon */
     /*
     Instead of a list of all class selectors,
     you can use the generic selector below, but it's slower:
     [class*="icon-"] {
     */
     .icon-twitter-off-black, .icon-remove, .icon-twitter-off-black-2 {
     	font-family: 'test1';
     	speak: none;
     	font-style: normal;
     	font-weight: normal;
     	font-variant: normal;
     	text-transform: none;
     	line-height: 1;
     	-webkit-font-smoothing: antialiased;
+    }
     .icon-twitter-off-black:before {
     	content: "\61";
+    }
     .icon-remove:before {
     	content: "\62";
+    }
     .icon-twitter-off-black-2:before {
     	content: "\63";
+    }

     <!doctype html>
     <html>
     <head>
     	<title>Icons Fonts</title>
     	<link rel="stylesheet" href="style.css" />
     	<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
     </head>
     <body>
     	<div data-icon="a"></div>
     	<div aria-hidden="true" data-icon="b"></div>
     	<div aria-hidden="true" data-icon="c"></div>
     </body>
     </html>

Synnefo

Revision 199a6ea4