something like this

@font-face {
    font-family: "<%= fontName %>";
    src: url('<%= fontPath %><%= fontName %>.eot?t=<%= timestamp %>');
    src: url('<%= fontPath %><%= fontName %>.eot?t=<%= timestamp %>#iefix') format('eot'),
        url('<%= fontPath %><%= fontName %>.woff2?t=<%= timestamp %>') format('woff2'),
        url('<%= fontPath %><%= fontName %>.woff?t=<%= timestamp %>') format('woff'),
        url('<%= fontPath %><%= fontName %>.ttf?t=<%= timestamp %>') format('truetype'),
        url('<%= fontPath %><%= fontName %>.svg?t=<%= timestamp %>#<%= fontName %>') format('svg');
}

issue:

[14:12:22] Using gulpfile ~/Documents/mygit/zrsm-worker/gulpfile.js
[14:12:22] Starting 'iconfont'...
Unhandled rejection Error in plugin 'gulp-iconfont-css'
Message:
    Error in template: write after end

my template:

@font-face {
  font-family: "<%= fontName %>";
  src: url('<%= fontPath %><%= fontName %>.eot');
  src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
    url('<%= fontPath %><%= fontName %>.woff') format('woff'),
    url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
    url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
}

.icon:before {
  font-family: "<%= fontName %>";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
  text-decoration: none;
  text-transform: none;
}

<% _.each(glyphs, function(glyph) { %>
.icon-<%= glyph.fileName %>:before {
  content: "\<%= glyph.codePoint %>";
}
<% }); %>

my gulpfile:

gulp.task('iconfont', function () {
  return gulp.src('app/icons/svgs/*.svg', {
      buffer: false
    })
    .pipe(plugins.iconfontCss({
      fontName: fontName,
      path: 'app/icons/own-icons-template.css',
      targetPath: '../styles/own-icons.css',
      fontPath: '../fonts/'
    }))
    .pipe(plugins.iconfont({
      fontName: fontName
    }))
    .pipe(gulp.dest(path.join(targetDir, 'fonts')))
    .on('error', errorHandler);
});

The "Usage" section in the README says to set the path property to 'app/assets/css/templates/_icons.scss'. I get an error when setting the path property to a file in this way. The documentation states that the path property can be css (default), less, or scss. Maybe I'm missing something, but I think this property is set incorrectly in the "Usage" section.

Hi, I suggest changing the style templates, this will simplify the entries in the classes
in these templates: _icons.css, _icons.less, _icons.scss, _icons.styl
In the template, this entry:
.icon:before {...}
it is better to write like this
[class^="icon-"], [class*=" icon-"], [data-icon]:before {...}
[data-icon]:before { content: attr(data-icon) !important; }
instead of such a record <i class="icon icon-name"></i> it suffices to write so <i class="icon-name"></i> and as the data attribute <i data-icon="&#xe001"></i>.

If i created a way for this plug to also generate an html template, would you accept it?

my first attempt i fear is not good enough (simply adding |html #L33) as you have to call iconfontCSS twice in your gulpFile (along with iconFont twice).

my second attempt was to create a htmlTemplate config option, but this meant i used a global streamConfig to get around a closure problem with streams, plus the output was only ever a single file rather than the chosen extension and a html file.

Do you know how to create and save 2 separate streams or this against how gulp should work?

I would like to use the .css (working with stylus @import) and npm install from github isn't really safe (as theses changes aren't tag, I get the latest master no matter what).

thanks 😄

Do you plan to add support for Stylus preprocessor?

Hi all,

I'm excited with that plugin and I'm already using it, but I faced a problem that when adding new SVG icons to the folder, the current css that generated on build gets changed after building to get the new icons, and the icons content code is changed.

Is anyone faced the same issue, and how we can solve it?

This new major version includes breaking compatibility changes.

Usually I pass the SVG file first, so that Chrome renders the icons smoother.
Is that any chance we could get an option to set the font files order on the generated css?

Thanks.

Hey there!

Just wondering if anyone has had a similar issue...

Everything seems to be working fine apart from the fact that the font files are not being generated?

Here's what I have...

var paths = {
    fontsDir: 'webapp/media/static/' + project + '/fonts/',
    stylesDir: 'webapp/media/static/' + project + '/styles/'
};
gulp.task('iconfont', function() {
  return gulp.src([paths.fontsDir + 'svg/*.svg'])
    .pipe(iconfontCss({
      fontName: fontName,
      path: paths.fontsDir + 'icons.css',
      targetPath: '/styls/site/icons.css',
      fontPath: paths.fontsDir
    }))
    .pipe(iconfont({
      fontName: fontName
    }))
    .pipe(gulp.dest(paths.stylesDir));
});

Any ideas?

Thanks

please see details in gulp-iconfont issue #123

Wondering if we should add this module to gulp-iconfont dependencies in order to have a single module to configure the complete iconfont workflow.

In iOS, before icon font been loaded (better to reproduce on slow network), there are emoji instead of icons. After fonts loaded everything looks fine (icons replaced emoji). Is it possible to fix this issue?

How can I resolve this problem ?
The targetPath creates a subfolder inside the fonts folder that comprises the full working path inside the fonts director.
For example:
fonts/
Users/username/full project path/icons.scss.

The problem occurs in MacOs and Linux. I do not desire to have either additional folders created or _icons.scss.

Actually, it's necessary to write ".icon .icon-nameoficon" inside class attribute but why not to use this selector :

[class^="icon-"],
[class*=" icon-"]{...}

with this, it's only necessary to use ".icon-nameoficon".

I am running into a issue with having the mixins, function, font-face, and classes all in one file. The issue is that in a component based architecture the mixin and function need to be available for usage on any stylesheet. Importing the icon stylesheet everywhere allows the mixins to work properly but causes the font-face declaration and icon classes to be printed on every components stylesheet when those only need to be printed once in a base stylesheet.

A possible solution is to have the mixins and function in a separate file from the font-face declaration and icon classes so a user can set up their imports to use the mixin globally and without the duplicated font-face and classes.

Any help is appreciated. At this moment I am not sure how to create the separate files with a custom template.

Thank you

It seems that the package on npm is at least a year older than the version with the cacheBuster.

https://github.com/backflip/gulp-iconfont-css/blob/master/index.js#L104

/cc @eduardolundgren

In gulp-iconfont we can specify the formats, but due to how gulp-iconfont-css generates the font-face code block we need to specify all the formats to avoid issues in some browsers.

Personally, I would like to just generate the woff and woff2 files, but right now I can't due to the hardcoded font-face block.

With the update of npm@6, the packages which have vulnerabilities are shown with the command npm audit.
This package has a dependency of [email protected], which has a vulnerability of prototype pollution.
https://nodesecurity.io/advisories/577
There might be more dependencies with vulnerability, I didn't inspect.
Please update them.

Any idea what might be causing this?

/Users/luismartins/Sites/prestashop/themes/domatica/src/node_modules/gulp-iconfont-css/index.js:104
                        throw error;
                              ^
TypeError: Object function lodash(value) {
      // don't wrap if already wrapped, even if wrapped by a different `lodash` constructor
      return (value && typeof value == 'object' && !isArray(value) && hasOwnProperty.call(value, '__wrapped__'))
       ? value
       : new lodashWrapper(value);
    } has no method 'template'
  at Function.exports.lodash.render (/Users/luismartins/Sites/prestashop/themes/domatica/src/node_modules/gulp-iconfont-css/node_modules/consolidate/lib/consolidate.js:537:56)
  at /Users/luismartins/Sites/prestashop/themes/domatica/src/node_modules/gulp-iconfont-css/node_modules/consolidate/lib/consolidate.js:146:25
  at /Users/luismartins/Sites/prestashop/themes/domatica/src/node_modules/gulp-iconfont-css/node_modules/consolidate/lib/consolidate.js:99:5
  at fs.js:266:14
  at /Users/luismartins/Sites/prestashop/themes/domatica/src/node_modules/gulp-watch/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:104:5
  at /Users/luismartins/Sites/prestashop/themes/domatica/src/node_modules/gulp/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:104:5
  at Object.oncomplete (fs.js:107:15)

hello，can support the option to specified template path, because maybe the css structure have some difference whith yours, thank you very much.

Using icon css from this cause issue on iphone.

1. When new font is added whole fonts are mismatched.
2. Fonts on iphone are replaced by random emojis on iphone.

Any possible solution to fix this.

Thanks

Goal

As the grunt-webfont options, it would be great to able custom template usage to allow more flexibility.

Concrete case

I have an icon set provided by a designer company which is fully compatible with FontAwesome.

So I set cssClass: 'fa-nx' option but I don't want the fa-nx css definition.

Instead, I would like to include the font-family rules to each fa-nx-* class in order to use my customs icons like this: fa fa-nx-my-icon.

I'm having trouble displaying my icons and I believe it's because the mixin icon-styles is not being properly included inside the icon mixin.

@mixin icon($filename, $insert: before, $extend: true) {
    &:#{$insert} {
        @if $extend {
            @extend %icon;
        } @else {
            @include icon-styles;
        }
        content: icon-char($filename);
    }
}

If I remove the if/else state and try to @extend %icon directly, it's not working either. However, if I ìnclude @icon-styles directly, it works.

What might be causing this behaviour? Am I missing something?

I think I've got the path, targetPath and fontPath configured correctly, but I'm having an issue now with targetPath.

I'm working on a Laravel app and have my gulpfile located in the project root. So my directory structure looks like:

• /app
• /public
• gulpfile.js

My gulp configuration code for this plugin is as follows:

var fontName = 'icons';

gulp.task('icon-font', function(){
    gulp.src(['app/assets/icons/*.svg'])
        .pipe(iconfontcss({
            fontName: fontName,
            path: 'app/assets/scss/templates/_icons.scss',
            targetPath: '../../../app/assets/scss/components/_icons.scss',
            fontPath: '../fonts/'
        }))
        .pipe(iconfont({
            fontName: fontName
        }))
        .pipe(gulp.dest('public/assets/fonts/'));
});

The problem I'm running into is this: the targetPath is supposed to go into app/assets/scss/components/ but its going into public/assets/scss/components instead. It's like "app" is being replaced by "public" in the path.

Am I doing something wrong or is this an issue with the plugin?

It will be great to be able to configure some properties like font-display.

(I’m using the .scss template to give examples. I don’t if it’s technically possible to do the same with Less)

The correct code point associated to an icon file name is currently determined by a series of @if instructions generated inside the icon mixin, as shown below.

@mixin icon($filename) {
    $char: "";
<% _.each(glyphs, function(glyph) { %>
    @if $filename == <%= glyph.fileName %> {
        $char: "\<%= glyph.codePoint %>";
    }<% }); %>

    &:before {
        @extend %icon;
        content: $char;
    }
}

However, in some cases, it would be useful to be able to get the code point of a given icon in order to use it for other purposes outside of this mixin.

For example, I have a use case where I would like to use an icon in an :after pseudo-element.

.some-button:after {
    @include icon('unicorn');
}

This doesn’t work. Calling the mixin produces an error, because it inserts a :before pseudo-element inside the :after selector.

I suggest extracting the series of @ifto their own function, with the unique goal of returning the code point associated to an icon name. It would make this logic reusable and allow this kind of syntax:

.some-button:after {
    content: icon-char('unicorn');
}

The function would look like that:

@function icon-char($filename) {
    $char: "";

    @if $filename == unicorn {
        $char: "\E001";
    }
    @if $filename == cat {
        $char: "\E002";
    }
    /* other @if instructions */

    @return $char;
}

and the icon mixin itself could be simplified to

@mixin icon($filename) {
    &:before {
        @extend %icon;
        content: icon-char($filename);
    }
}

What do you think?

I came across an issue that, unfortunately, I contributed to create with the changes introduced in the bundled template via #11.

Now, when we try to call the icon mixin inside a @mediadirective, we get the following error:

error assets/sass/main.scss (Line 10 of assets/sass/partials/_icons.scss: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

The cause is the use of the @extend directive inside the mixin.

Reverting #11 would solve the issue but would also remove the ability to greatly improve the size of the output CSS… I think we could find a compromise.

Adding an additional parameter to the mixin could allow to explicitly opt out from @extends and would make everything work again with media queries. It could look like that:

@mixin icon($filename, $insert: before, $selector: extend) {
    &:#{$insert} {
        @if ($selector == 'extend') {
            @extend %icon;
        } @else {
            font-family: "icons";
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
            text-decoration: none;
            text-transform: none;
        }
        content: icon-char($filename);
    }
}

To be honest, this doesn’t look really elegant to me (it duplicates the style of the %icon placeholder selector) but this is the best solution I could think of.

Does anybody have a better idea or any suggestion?

Hello,

I'm having the same issue as #33. Unless I'm mistaken (which is possible), the following code :

@mixin <%= cssClass%>($filename, $insert: before, $extend: true) {
    &:#{$insert} {
        @if $extend {
            @extend %<%= cssClass%>;
        } @else {
            @include <%= cssClass%>-styles;
        }
        content: <%= cssClass%>-char($filename);
    }
}

should not result in the following (extracted from your test files) :

.custom-icon:before {
    font-family: "Icons";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
}

.custom-icon-github:before {
    content: "\E002";
}

.custom-icon-twitter:before {
    content: "\E003";
}

but rather :

.custom-icon-github:before, .custom-icon-twitter:before {
    font-family: "Icons";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
}

.custom-icon-github:before {
    content: "\E002";
}

.custom-icon-twitter:before {
    content: "\E003";
}

Let me explain my thinking :

The "&:#{$insert}" part replaces & with whatever selector is used right before, based on your test files this is an example :

.custom-icon-github {
    @include custom-icon(github);
}

so & should be replaced with .custom-icon-github and #{$insert} by before (as it is the defautl value)

Then the @extend %<%= cssClass%>; part should be called as $extend is true by default
which should result in the following logic :

.custom-icon-github should extend %cssClass (which in this case resolve to %custom-icon
therefore we shoudl not end-up with a .custom-icon:before selector but a .custom-icon-github:before selector since %custom-icon is (again if I understood how extends works right) resolved to .custom-icon-github:before (see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders)

Use case: pass a random string to the mustache template, so we can create a font-face definition like:

• icons.eot?f7jjdvlkflikheqoxbt9#iefix

This may be really needed when updating an existing font on a site using cache mechanism.

This can be very easily done, by adding 1 line when building the SCSS file from the template:

consolidate[config.engine](config.path, {
                                        glyphs: glyphMap,
                                        fontName: config.fontName,
                                        fontPath: config.fontPath,
                                        cssClass: config.cssClass,
                                        config: config
                                }, function(err, html) {

It just pass the full "config" variable, so if you add any extra variable in the Gulp file, it is available in the template.

Full example

Gulpfile

.pipe(iconfontCSS({
      fontName: fontName,
      path: './src/templates/iconfont/_icons.scss',
      targetPath: '../src/scss/abstractions/_font-icons.scss',
      fontPath: '../fonts/',
      cssClass: 'fonticon',
      hash: Math.random().toString(36).substring(6)
    }))

Template

@font-face {
  font-family: "<%= fontName %>";
  src: url('<%= fontPath %><%= fontName %>.eot?<%= config.hash %>');
  src: url('<%= fontPath %><%= fontName %>.eot?<%= config.hash %>#iefix') format('eot'),
    url('<%= fontPath %><%= fontName %>.woff2?<%= config.hash %>') format('woff2'),
    url('<%= fontPath %><%= fontName %>.woff?<%= config.hash %>') format('woff'),
    url('<%= fontPath %><%= fontName %>.ttf?<%= config.hash %>') format('truetype'),
    url('<%= fontPath %><%= fontName %>.svg?<%= config.hash %>#<%= fontName %>') format('svg');
}

Not quite sure how this would work, but for now the only way to create aliases for icons is to duplicate the icon, which as we all know is not very maintainable. It would be nice if we could somehow define that an icon has an alias so that in the outputted CSS the icons have the same content

It seems like we could save a few bytes by using a using a starts-with selector to apply the general icon styles rather than generating a long list.

Current generated list:

[ ... ]
.icon-message-alert:before,
.icon-news:before,
.icon-coupon:before,
.icon-twitter-box:before,
.icon-twitter:before {
  font-family: "RadicalFont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none; }

Smaller pattern-based selector:

[class^="icon-"]:before {
  font-family: "RadicalFont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none; }

Hi. I have a problem with gulp-iconfont, gulp-iconfont-css'. How I can check if font changed? I try use 'gulp-changed' - but still don't work. Font generate(( Can somebody help me?

I would like to make a suggestion regarding the SCSS template:
I re-wrote the SCSS template in a way which I feel is more readable and produce less code:

Template:

@font-face {
    font-family: "<%= fontName %>";
    src: url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
         url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
}

@mixin styles{
    font-family: "<%= fontName %>";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
    text-decoration: none;
    text-transform: none;
}

[class^="icon-"], [class*=" icon-"]{
    @include styles;
}


$svg-font-map: (<% _.each(glyphs, function(glyph) { %>"<%= glyph.fileName %>":"\<%= glyph.codePoint %>", <% }) %>);

@mixin <%= cssClass%>($filename, $insert: before, $extend: true) {
    &::#{$insert}{ content:map-get($svg-font-map, $filename); @include styles; }
}

<% _.each(glyphs, function(glyph) { %>.<%= cssClass%>-<%= glyph.fileName %> { @include <%= cssClass%>(<%= glyph.fileName %>); }
<% }); %>

Output:

@font-face {
    font-family: "foo";
    src: url('../fonts/foo.eot');
    src: url('../fonts/foo.eot?#iefix') format('eot'),
        url('../fonts/foo.woff') format('woff'),
        url('../fonts/foo.ttf') format('truetype'),
        url('../fonts/foo.svg#foo') format('svg');
}

    @mixin styles{
    font-family: "emc";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
    text-decoration: none;
    text-transform: none;
}

[class^="icon-"], [class*=" icon-"]{
    @include styles;
}
$icon-map: ("arrow-down":"\E001", "arrow-up":"\E002", "arrow_back":"\E003");

@mixin icon($filename, $insert: before, $extend: true) {
    &::#{$insert}{ content:map-get($svg-font-map, $filename); @include styles; }
}

.icon-arrow-down { @include icon(arrow-down); }
.icon-arrow-up { @include icon(arrow-up); }
.icon-arrow_back { @include icon(arrow_back); }

Forgotten to do it.

how i can remove the code of the icons in the class?
from this:

.icon-uEA01-docs:before {
    content: "\E001";
}

to this:

.icon-docs:before {
    content: "\E001";
}

Hi, @backflip
Do you have a list of reserved words? Because I've tried to use equal.svg and it had messed up with my iconset


Hi guys,

I've been running into this issue when I try to install gulp-iconfont-css and gulp-icon-font

npm WARN peerDependencies The peer dependency gulp-iconfont@~4.0.0 included from gulp-iconfont-css will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency mongodb@~1.4 included from mongoskin will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

Any thoughts on this?

Thanks!

It would be very cool to have a sample html file to see all the icons available.
IcoMoon does it and it's very useful: