How do I generate CSS files with gulp-iconfont?

Use the glyphs event in the Gulp task to template CSS manually or integrate with the gulp-iconfont-css plugin for automatic stylesheet generation, as recommended in the README's 'Make your CSS' section.

gulp-iconfont or using SVG icons directly?

For new projects, SVG icons are better as they support colors and accessibility. gulp-iconfont is best for legacy browser support or font-based systems, but the README advises transitioning to SVG when possible.

Why is WOFF2 disabled by default in gulp-iconfont?

The README cites issue #64 where WOFF2 caused problems on some setups. You can enable it by adding 'woff2' to the formats array, but it may require troubleshooting.

How to prepare SVG files from Illustrator for gulp-iconfont?

Follow the README's exact settings: save as SVG 1.1 with fonts as SVG, no subsetting, embedded images, presentation attributes, 1 decimal place, UTF-8 encoding, and check 'output fewer tspan elements'.

Can gulp-iconfont handle color icons?

No, icon fonts are monochrome, so color information in SVGs is lost during conversion. For color icons, consider using SVG sprites or inline SVG directly.

What if some font glyphs aren't converting properly?

Add normalize:true and a fontHeight greater than 1000 (e.g., 1001) in the options, as suggested in the README to fix alignment and sizing issues.

Open-Awesome

gulp-iconfont

MITTypeScriptv11.0.1

A Gulp plugin that generates icon font files (TTF, EOT, WOFF, WOFF2, SVG) from multiple SVG icons.

GitHub

849 stars71 forks0 contributors

What is gulp-iconfont?

gulp-iconfont is a Gulp plugin that converts multiple SVG icon files into web-compatible icon font formats like TTF, EOT, WOFF, WOFF2, and SVG fonts. It automates the font generation pipeline by bundling several specialized conversion plugins, simplifying the process of creating icon fonts for web projects. The tool is designed to keep SVG as the source, making it easier to transition to direct SVG usage in the future.

Target Audience

Frontend developers and build engineers using Gulp who need to generate icon fonts for web applications, especially those supporting older browsers or requiring font-based icon systems.

Value Proposition

Developers choose gulp-iconfont for its streamlined, all-in-one API that wraps multiple font conversion steps into a single Gulp task, reducing configuration complexity. Its emphasis on SVG as the source future-proofs projects, and its detailed SVG preparation guides ensure reliable font output.

Overview

Create icon fonts from several SVG icons

Use Cases

Best For

Generating icon fonts for Bootstrap or similar CSS frameworks
Automating icon font builds in Gulp-based frontend workflows
Creating web fonts from SVG design assets for legacy browser support
Projects transitioning from icon fonts to SVG but needing interim font compatibility
Teams using Illustrator or Inkscape for icon design who need a reliable font pipeline
Maintaining a single SVG source while outputting multiple font formats

Not Ideal For

Modern projects exclusively targeting browsers with full SVG support
Teams using build tools other than Gulp, like Webpack or Vite
Applications requiring multi-color, animated, or accessible SVG icons
Quick prototypes where setting up a Gulp pipeline and SVG preprocessing is overhead

Pros & Cons

Pros

Multi-Format Font Output

Generates TTF, EOT, WOFF, WOFF2, and SVG font files from SVG inputs, covering all major web font formats as specified in the README's formats option.

Integrated Conversion Pipeline

Bundles gulp-svgicons2svgfont, gulp-svg2ttf, gulp-ttf2eot, and gulp-ttf2woff into a single API, simplifying the build process and reducing configuration complexity.

Custom CSS Generation Support

Emits glyph data events for CSS templating, enabling integration with tools like gulp-iconfont-css for automatic stylesheet creation, as highlighted in the usage section.

Detailed SVG Preparation Guides

Provides step-by-step instructions for optimizing SVG sources from Inkscape and Illustrator, ensuring reliable font conversion and minimizing errors.

Cons

Deprecated Technology Reliance

The README explicitly warns that icon fonts are being replaced by SVG icons, making this tool less future-proof for modern web development where SVG is preferred.

Complex SVG Source Requirements

Requires SVG files to have a minimum height of 500 and specific preparation steps from design tools, which can be error-prone and add preprocessing overhead.

External Tool Dependencies

Auto-hinting via ttfautohint is experimental and requires the binary installed on the system, adding setup complexity and potential compatibility issues.

Format Limitations and Issues

WOFF2 format is disabled by default due to reported issues, and SVG fonts are deprecated in browsers, limiting optimal modern web performance.

Frequently Asked Questions

Related Projects

gulp-uncss

DEPRECATED. Remove unused CSS selectors.

Stars931

Forks38

Last commit9 years ago

gulp-svgstore

Combine svg files into one with symbol elements

Stars641

Forks31

Last commit3 years ago

gulp-responsive

gulp-responsive generates images at different sizes

Stars497

Forks59

Last commit4 years ago

gulp-css-base64

Gulp's task for transform all resources found in a CSS (those within a url( ... ) declaration) into base64-encoded data URI strings

Stars64

Forks20