css-codepoints

Generate CSS classes per font glyph.

Example

var cssCodepoints = require('css-codepoints');
 
var css = cssCodepoints({
  fontFamily: 'MySuperFont',
  prefix: 'icon-',
  formats: {
    svg: 'my_super_font.svg',
    ttf: 'my_super_font.ttf'
  },
  icons: {
    foo: 0x1337,
    bar: 0x266e
  }
});
 
fs.writeFileSync('generated.css', css);

generated.css:

@font-face {
    font-family: "MySuperFont";
    src: url("my_super_font.svg") format("svg"),
         url("my_super_font.ttf") format("ttf");
}
 
.icon-foo::before {
    content: "\1337";
    font-family: "MySuperFont";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    vertical-align: bottom;
}
.icon-bar::before {
    content: "\266e";
    font-family: "MySuperFont";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    vertical-align: bottom;
}

Options

Option	Required?	Type
fontFamily	Yes	string
formats	Yes, ≥1	Object.<type: string, url: string>[]
icons	No	Object.<name: string, codepoint: {number|string}>[]
prefix	No	string

options.fontFamily is merely the value of font-face property.

options.formats describes the @font-face's src property.

options.icons describes code points to generate classes for. Each codepoint value should normally be a number, but for the sake of compatibility with JSON configs (which have no notion of a hexadecimal number) it is also allowed to be a string of hex digits.

options.prefix is the common class prefix, empty by default.

License

MIT