tutorial / directive

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

.xn-icon {
  font-family:"iconfinancialfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-year-account:before { content: "\e600"; }
.icon-month-account:before { content: "\e601"; }
.icon-DOC:before { content: "\e602"; }
.icon-compose:before { content: "\e603"; }
.icon-print:before { content: "\e604"; }
.icon-trash:before { content: "\e605"; }
.icon-return:before { content: "\e606"; }
.icon-add:before { content: "\e607"; }
.icon-close:before { content: "\e608"; }
.icon-date:before { content: "\e609"; }
.icon-zoomin:before { content: "\e60a"; }
.icon-zoomout:before { content: "\e60b"; }
.icon-import:before { content: "\e60c"; }