A CodePen by Brian Gonzalez. Animicons: Sprite animations using icon fonts - Built with [Glyphs](http://glyphsapp.com), processed with [FontPrep](http://fontprep.com), with a little help from [Font Awesome](http://fortawesome.github.com/Font-Awesome/). Ge

index.html

<h1>Animicons</h1>
<h4><span class='quiet'>&diams;</span> Sprite Animations Using Icon Fonts <span class='quiet'>&diams;</span></h3>

<div id='icon-container'>
 <!-- Broadcast -->
  <span data-start='e000' 
        data-frames='3' 
        data-interval='200'>
  </span>
  
  <!-- Download -->
  <span data-start='e003'
        data-frames='3' >
  </span>
  
  <!-- Folder -->
  <span data-start='e006' 
        data-frames='2' 
        data-interval='750'>
  </span>
  
  <!-- Settings -->
  <span data-start='e008'
        data-frames='4' 
        data-interval='60'>
  </span>
  
  <!-- Gauges -->
  <span data-start='e00c'
        data-frames='3' 
        data-index='0' >
  </span>
  
  <!-- Graph -->
  <span data-start='e010'
        data-frames='4' 
        data-index='0'
        data-interval='500'>
  </span>
  
  <!-- Caution -->
  <span data-start='e014' 
        data-frames='2' 
        data-index='0'
        data-interval='200'>
  </span>
  
  <!-- Road -->
  <span data-start='e016'
        data-frames='4' 
        data-index='0'
        data-interval='60'>
  </span>
  
  <!-- Like -->
  <span data-start='e01A'
        data-frames='3' 
        data-index='0' 
        data-interval='250'>
  </span>
  
  <!-- Dislike -->
  <span data-start='e01D'
        data-frames='3' 
        data-index='0' 
        data-interval='250'>
  </span>
  
  <!-- OctoCat -->
  <span data-start='e020'
        data-frames='3' 
        data-index='0' 
        data-interval='150'>
  </span>
  
  <!-- Keyboard -->
  <span data-start='e023;'
        data-frames='3' 
        data-index='0' 
        data-interval='400'>
  </span>
  
  <!-- Calendar -->
  <span data-start='e026'
        data-frames='5' 
        data-index='0'
        data-interval='500'>
  </span>
  
  <!-- HD -->
  <span data-start='e02B'
        data-frames='2' 
        data-index='0'
        data-interval='200'>
  </span>
  
  <!-- Wand -->
  <span data-start='e02D'
        data-frames='3' 
        data-index='0' 
        data-interval='100'>
  </span>
  
  <!-- Trash -->
  <span data-start='e030'
        data-frames='4' 
        data-index='0'>
  </span>
  
  <!-- Pen -->
  <span data-start='e034'
        data-frames='6' 
        data-index='0'
        data-interval='150'>
  </span>
  
  <!-- Delivery -->
  <span data-start='e03A'
        data-frames='4' 
        data-index='0'
        data-interval='200'>
  </span>
</div>

<div id='info'>
  Built with <a href="http://glyphsapp.com" target='new'>Glyphs</a>, processed with <a href="http://fontprep.com" target='new'>FontPrep</a>, with a little help from <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a>. Get the files <a href="http://briangonzalez.org/blog/animicons" target='new'>here</a>.
</div>

script.js

$(document).ready(function(){
  
    var interval = null;
    $.each( $('[data-start]'), function(idx, obj){
      
        var $obj      = $(obj);
        var start     = $obj.attr('data-start');
        var frames    = $obj.attr('data-frames')
        interval      = $obj.attr('data-interval') || 300;
        
        $obj.attr('data-icon', $('<div/>').html("&#x"+ start + ";").text() )
        $obj.attr('data-index', 0);
            
        setInterval( function(){
          var index = parseInt($obj.attr('data-index')) + 1;   
          $obj.attr('data-index', index);
        
          if (index === parseInt(frames) ){
            $obj.attr('data-index', 0);
            index = 0
          }
          else{
            $obj.attr('data-index',   index )         
          }
          
          var val = (parseInt(start, 16) + index).toString(16);
          var enc = $('<div/>').html("&#x"+ val + ";").text();             
          $obj.attr('data-icon', enc);
         }
      , parseInt(interval) );
    });
    
});

style.scss

@import "compass";
  @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);

/*--- BASE STYLES ------------------------------
----------------------------------------------------*/

$yellow: #ffeebe;

body{ 
  background: $yellow; 
  color: #333;
  font-family: 'Open Sans Condensed', sans-serif;
  
  h1{ 
    font-size: 140px; margin: 0; text-align: center;
    width: 100%; margin: 0 auto; text-transform: uppercase; font-weight: 700; @include text-shadow( 2px 3px 0px $yellow - 50);
  }
  
  h4{ font-size: 14px; margin: -30px 0 30px 0; text-align: center; text-transform: uppercase; color: #777 }
  
  a, a:visited{ color: #333; text-decoration: none; border-bottom: 1px dashed #333 }
  .quiet{ color: $yellow - 50 }
  
}

#icon-container{
  width: 80%;
  margin: 0 auto;
  text-align: center;
  background: $yellow + 20;
}

#info{
  font-size: 12px;
  width: 80%;
  margin: 0 auto;
  text-align: right;
  padding: 10px;
  font-weight: 700;
}



/*--- ICON FONT LOGIC ------------------------------
----------------------------------------------------*/
@font-face {
  font-family: 'animicons';
  src: url('http://briangonzalez.org/files/animicons/animicons.eot?#iefixd') format('embedded-opentype'), 
       url('http://briangonzalez.org/files/animicons/animicons.woff?123') format('woff'), 
       url('http://briangonzalez.org/files/animicons/animicons.ttf?123')  format('truetype'),
       url('http://briangonzalez.org/files/animicons/animicons.svg?123#svgFontName') format('svg');
}

[data-icon]:before {
  font-family: animicons; /* BYO icon font, mapped smartly */
  speak: none; /* Not to be trusted, but hey. */
  content: attr(data-icon);
  font-size: 40px;
}



/*--- MEDIA QUERIES ------------------------------
----------------------------------------------------*/

@media screen and (max-width: 480px) {
  body h1            { font-size: 40px; }
  body h4            { margin-top: -10px }
  [data-icon]:before { font-size: 20px }
  #info{ font-size: 10px }
}

@media screen and (max-width: 768px) {
  body h1            { font-size: 80px; }
  body h4            { margin-top: -10px }
  [data-icon]:before { font-size: 26px }
  #info{ font-size: 10px }
}