CSS: Webfont Icons

icons.html

<!-- Icon + Text -->
<h1>
  <i data-icon="1" aria-hidden="true"></i>
  Titolo
</h1>

<!-- Icon only -->
<h1 class="icon-alone">
  <i data-icon="1" aria-hidden="true"></i>
  <span>Titolo</span>
</h1>

icons.scss

@font-face {
	font-family: 'myfont';
	src:url('fonts/myfont.eot');
	src:url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/myfont.svg#myfont') format('svg'),
		url('fonts/myfont.woff') format('woff'),
		url('fonts/myfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

i[data-icon] {
	width: auto; height: auto;
	line-height: inherit;
	background: none;
	background-position: 0 0;
	background-repeat: repeat;
}

i[data-icon]:before {
	content: attr(data-icon);
	font-family: 'myfont';
	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.icon-alone, i[data-icon] { 
	@include inline-block('baseline');
}

.icon-alone > span {
	position: absolute;
	top: -9999px;
	left: -9999px;
}