tutorial / directive

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

.xn-icon {
  font-family:"iconpurchasingfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-Compare_quotation:before { content: "\e600"; }
.icon-vip:before { content: "\5602"; }
.icon-orders:before { content: "\5603"; }
.icon-Internal-orders:before { content: "\5604"; }
.icon-staff-vip:before { content: "\5605"; }
.icon-Apply-internal-orders:before { content: "\5606"; }
.icon-purchaserequisition:before { content: "\5607"; }
.icon-advancepayment:before { content: "\5608"; }
.icon-directquotation:before { content: "\5609"; }
.icon-internalsupplier:before { content: "\560a"; }
.icon-payment:before { content: "\560b"; }
.icon-supplier:before { content: "\560c"; }
.icon-last-page:before { content: "\560f"; }
.icon-next-page:before { content: "\5610"; }
.icon-more-3:before { content: "\5612"; }
.icon-more-2:before { content: "\5611"; }