Sparkicons por Kseso

Uso de Sparkicons en los enlaces de un texto.

by kseso

HTML

<h1>Sparkicons</h1>
<p>Aquí tienes el documento sobre <a href="#" data-sparkicon="video" data-sparkicon-plus="12:02">gatetes y monetes</a> cómo suenan sus 
<a href="#" data-sparkicon="music" data-sparkicon-plus="3:51">serenatas nocturnas</a> y las reacciones de quienes han dado 
<a href="#" data-sparkicon="chat" data-sparkicon-plus="586">su opinión</a></p>

CSS

body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #eee;
}
h1 {font-size: 2rem;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); margin: .7rem; line-height: 1.2;}
p {font-size: 1.2rem; line-height: 1.4; color: #404040;}
a {
  display: inline-block;
  overflow: hidden;
  color: tomato;
  padding: 0;
  text-decoration: none;
  line-height: 1; 
  text-shadow: 0 1px #fff;
  background: #fafafa;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #dadada #d2d2d2 #c5c5c5;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}
a:hover {background: #cdcdcd;}
a[data-sparkicon]:after {
  content: attr(data-sparkicon) attr(data-sparkicon-plus);
  font-family: sparkicons;
  background-image: -webkit-linear-gradient(top, #92ADE8, #7492C5);
  background-image: -moz-linear-gradient(top, #92ADE8, #7492C5);
  background-image: -o-linear-gradient(top, #92ADE8, #7492C5);
  background-image: linear-gradient(to bottom, #92ADE8, #7492C5);
  margin-left: 5px;
  color: #fff;
  padding: 0 5px;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
} 

@font-face {
    font-family: "sparkicons";
    src:...