tutorial / directive

@font-face {font-family: "iconsitefont";
  src: url('font/iconfont.eot?t=1465376720'); /* IE9*/
  src: url('font/iconfont.eot?t=1465376720#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('font/iconfont.woff?t=1465376720') format('woff'), /* chrome, firefox */
  url('font/iconfont.ttf?t=1465376720') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('font/iconfont.svg?t=1465376720#iconfont') format('svg'); /* iOS 4.1- */
}

.icon-site{
  font-family:"iconsitefont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-site-collect:before { content: "\9600"; }
.icon-site-collect01:before { content: "\9601"; }
.icon-site-like:before { content: "\9602"; }
.icon-site-like01:before { content: "\9603"; }
.icon-site-view:before { content: "\9604"; }
.icon-site-superscript:before { content: "\9605"; }
.icon-site-iconfontpingluneps:before { content: "\9606"; }
.icon-site-reply:before { content: "\9607"; }
.icon-site-attention:before { content: "\9608"; }
.icon-site-attention01:before { content: "\9609"; }
.icon-site-original-1:before { content: "\960a"; }