search

ManageIQ / font-fabulous

A fabulous iconset packaged as a font
https://manageiq.org/font-fabulous/
Apache License 2.0
3 stars 13 forks source link

Update template to build a more webpack friendly dist #43

Closed AllenBW closed 7 years ago

AllenBW commented 7 years ago 
$ff-asset-helper: false !default;
$ff-font-path: "../fonts/font-fabulous"!default;

@font-face {
  font-family: "font-fabulous";
  src: if($ff-asset-helper, font-url("font-fabulous/font-fabulous.eot"), url("#{$ff-font-path}/font-fabulous.eot"));
  src: if($ff-asset-helper, font-url("font-fabulous/font-fabulous.eot?#iefix"), url("#{$ff-font-path}/font-fabulous.eot?#iefix")) format("embedded-opentype"),
       if($ff-asset-helper, font-url("font-fabulous/font-fabulous.woff2"), url("#{$ff-font-path}/font-fabulous.woff2")) format("woff2"),
       if($ff-asset-helper, font-url("font-fabulous/font-fabulous.woff"), url("#{$ff-font-path}/font-fabulous.woff")) format("woff"),
       if($ff-asset-helper, font-url("font-fabulous/font-fabulous.ttf"), url("#{$ff-font-path}/font-fabulous.ttf")) format("truetype"),
       if($ff-asset-helper, font-url("font-fabulous/font-fabulous.svg#font-fabulous"), url("#{$ff-font-path}/font-fabulous.svg#font-fabulous")) format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "font-fabulous";
    src: if($ff-asset-helper, font-url("font-fabulous/font-fabulous.svg#font-fabulous"), url("#{$ff-font-path}/font-fabulous.svg#font-fabulous")) format("svg");
  }
}

If the built looks like this, webpack will be super happy! (it looks and replaces the url path with the ff-font-path specified in the build