Skip to content
PostCSS plugin to generate iconfonts from stylesheets.
JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 2 commits ahead, 11 commits behind kkoudev:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.eslintrc.yml
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
yarn.lock

README.md

postcss-webfont

npm GitHub license

postcss-webfont is PostCSS plugin for generating web fonts from stylesheets.

Installation

npm

npm install postcss-webfont --save-dev

yarn

yarn add postcss-webfont --dev

Usage

const postcss = require('postcss');
const webfont = require('postcss-webfont');

const options = {
  outputPath: './dist/fonts/'
};

postcss([webfont(options)])
  .process(css)
  .then(function(result) {
    fs.writeFileSync('./dist/style.css', result.css);
  });

Options

basePath

Your base path that will be used for svg files with absolute CSS urls.

Type: String

Default: ./

outputPath

Relative path to the directory that will keep your output font file.

Type: String

Default: ./

stylesheetPath

Relative path to the base directory that will keep your stylesheet file.

Type: String

Default: ./

publishPath

The url to the output directory resolved relative to the HTML page.

Type: String

Default: ``

cachePath

The cache file path of generated fonts.

Type: String

Default: .fontcache.json

formats

The output formats of font-face src property.

Type: Array<String>

Default: ['ttf', 'eot', 'woff']

startUnicode

Starting codepoint used for the generated glyphs.

Type: Integer

Default: 0xEA01

verticalAlign

The vertical-align property value.

Type: String

Default: middle

svgicons2svgfont options

The options of svgicons2svgfont are available:

  • options.fontWeight
  • options.fontStyle
  • options.fixedWidth
  • options.centerHorizontally
  • options.normalize
  • options.fontHeight
  • options.round
  • options.descent

Example

├─┬ css/
│ └─ style.css
├── fonts/
└─┬ svg/
  ├─ arrow-up-left.svg
  └─ arrow-up-right.svg

style.css

// before
@font-face {
  font-family: 'font-awesome';
  src: url('./fonts/*.svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
// after
@font-face {
  font-family: 'font-awesome';
  src:  url('./fonts/font-awesome.eot');
  src:  url('./fonts/font-awesome.eot#iefix') format('embedded-opentype'),
    url('./fonts/font-awesome.ttf') format('truetype'),
    url('./fonts/font-awesome.woff') format('woff'),
    url('./fonts/font-awesome.svg?#font-awesome') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^='iconfont-font-awesome-']::before, [class*=' iconfont-font-awesome-']::before,
[class^='iconfont-before-font-awesome-']::before, [class*=' iconfont-before-font-awesome-']::before,
[class^='iconfont-after-font-awesome-']::after, [class*=' iconfont-after-font-awesome-']::after {
  font-family: 'font-awesome', sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.iconfont-font-awesome-arrow-up-left::before {
  content: '\EA01';
}
.iconfont-before-font-awesome-arrow-up-left::before {
  content: '\EA01';
}
.iconfont-after-font-awesome-arrow-up-right::after {
  content: '\EA02';
}

Changelog

License

You can’t perform that action at this time.