dt-iconography-webfont

dt-iconography-webfont

Icon webfonts for the Dealer Tire web properties

Usage with LessCSS

The package provides:

• icon webfonts (eot, woff, woff2, ttf, svg)
• a demo page (dt-icons.html)
• stylesheets (vanilla CSS, LessCSS, and SCSS) file containing:
  • @font-family include
  • a general (bem style) .icon class
  • individual classes for each icon

Relative Font Path

You may specifiy a path prefix for the generated @font-family in the less file (at compile time) by specifying a @dt-icons-font-path less variable. (See fontPathVariables)

When not specified, the files are loaded from the current directory:

@font-face {
  font-family: "dt-icons";
  src: url("icon/dt-icons.eot?63cba9c901950ea6af5fdb9a59bb3c79");
  src: url("icon/dt-icons.eot?#iefix") format("embedded-opentype"),
       url("icon/dt-icons.woff2?63cba9c901950ea6af5fdb9a59bb3c79") format("woff2"),
       url("icon/dt-icons.woff?63cba9c901950ea6af5fdb9a59bb3c79") format("woff"),
       url("icon/dt-icons.ttf?63cba9c901950ea6af5fdb9a59bb3c79") format("truetype"),
       url("icon/dt-icons.svg?63cba9c901950ea6af5fdb9a59bb3c79#dt-icons") format("svg");
  font-weight:normal;
  font-style:normal;
}

When specified:

@dt-icons-font-path="../../icon/";

Yields:

@font-face {
  font-family: "dt-icons";
  src: url("../../icon/dt-icons.eot?63cba9c901950ea6af5fdb9a59bb3c79");
  src: url("../../icon/dt-icons.eot?#iefix") format("embedded-opentype"),
       url("../../icon/dt-icons.woff2?63cba9c901950ea6af5fdb9a59bb3c79") format("woff2"),
       url("../../icon/dt-icons.woff?63cba9c901950ea6af5fdb9a59bb3c79") format("woff"),
       url("../../icon/dt-icons.ttf?63cba9c901950ea6af5fdb9a59bb3c79") format("truetype"),
       url("../../icon/dt-icons.svg?63cba9c901950ea6af5fdb9a59bb3c79#dt-icons") format("svg");
  font-weight:normal;
  font-style:normal;
}