@font-face {
      font-family: 'symbols';
      src: url('symbols.eot?111656997');
      src: url('symbols.eot?111656997#iefix') format('embedded-opentype'),
           url('symbols.woff?111656997') format('woff'),
           url('symbols.ttf?111656997') format('truetype'),
           url('symbols.svg?111656997#symbols') format('svg');
      font-weight: normal;
      font-style: normal;
    }
     
     
    .demo-icon{
      font-family: "symbols";
      font-style: normal;
      font-weight: normal;
      speak: none;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }

    /* <span aria-hidden="true" data-icon="&#x21dd;"></span>  Stats */
    [data-icon]:before {
	  font-family: "symbols"; 
	  content: attr(data-icon);
	  speak: none; /* Not to be trusted, but hey. */
	}


	/* <a href="#" class="icon-alone">
	  <span aria-hidden="true" data-icon="&#x25a8;"></span>
	  <span class="screen-reader-text">RSS</span>
	</a> */
		.icon-alone {
	  display: inline-block; /* Chrome 19 was weird with clickability without this */
	}
  a.icon-alone {
    text-decoration: none;
  }
	.screen-reader-text { /* Reusable, toolbox kind of class */
	  position: absolute;
	  top: -9999px;
	  left: -9999px;
	}