@font-face{ font-family:'icontype'; src: url('icontype.eot?') format('eot'), url('icontype.woff') format('woff'), url('icontype.ttf') format('truetype'), url('icontype.svg?#IconType') format('svg'), url('https://use.icontype.com/2.0.0/icontype.eot?') format('eot'), url('https://use.icontype.com/2.0.0/icontype.woff') format('woff'), url('https://use.icontype.com/2.0.0/icontype.ttf') format('truetype'), url('https://use.icontype.com/2.0.0/icontype.svg?#IconType') format('svg'); } @mixin icon($icon: "", $line-height: "inherit") { @if $icon { content: "#{$icon}"; } font-family: icontype; -webkit-font-feature-settings: "liga" 1, "dlig" 1; -moz-font-feature-settings: "liga=1, dlig=1"; font-feature-settings: "liga" 1, "dlig" 1; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smooth: always; font-style: normal; font-weight: normal; line-height: $line-height; text-rendering: optimizeLegibility; text-transform: lowercase; } %icontype { @include mixin; } html[data-icontype="true"] i, i.it { @include mixin; }