nfroidure/gulp-iconfont

Include documentation on how to use the generated font

Closed this issue · 3 comments

doug-wade commented

I've generated my font in woff and ttf formats using the simplest working example I could figure:

gulp.task('iconfont', function() {
  return gulp.src(['icons/svg/*.svg'])
    .pipe(iconfont({
      fontName: fontName, // required
      appendUnicode: true, // recommended option
      formats: ['ttf', 'woff'],
      timestamp: runTimestamp // recommended to get consistent builds when watching files
    }))
    .pipe(iconfontCss({
      fontName: fontName
    }))
    .pipe(gulp.dest('build'));
});

I'd now like to include the icons on my page, but I can't for the life of me figure out how to discover the codepoints that have been mapped to each of the icons. I'd expect the generated css to contain a separate class with a :psuedo selector to insert the icon, so, for instance, if I generated a font from an icon example.svg, the element <span class="icon-example"></span> or <i class=icon-example"></i> would automatically include the example.svg icon, but the generated css only has the @font-face and three generated classes: icon:before, icon-$fontName.ttf:before and icon-$fontName.woff:before. The plugin did seem to change the name of my icons in my source folder (!?!?!) to include codepoints (i.e. what was example.svg is now uEA0A-example.svg), so I tried including the html entity directly (<i class="icon icon-redfinIcons icon-redfinIcons.ttf">&#xea0a</i>), using a data-icon attribute <i class="icon icon-redfinIcons icon-redfinIcons.ttf" data-icon="u+ea0a"></i>, and creating my own class (.icon-house:before { content: "\eA0A"; }), but none of them seem to include the glyph I expected.

I suspect this is one of those things that everyone already knows, but even just a link to a reliable resource on using icon fonts and an explanation of how codepoints are assigned to glyphs would be very helpful.

nfroidure commented

@prekolna there is a lot of resource on how to use gulp_iconfont on the web but the fact is that they are outdated since the last major updates.

I do not use gulp-iconfont-css so i'm not really up to date with its evolution but i think it is not yet updated for the last gulp-iconfont version backflip/gulp-iconfont-css#25 . You may PR the project to get it right.

You can also not use gulp-iconfont-css and build your own setup. Here is my setup:

doug-wade commented

Thanks for answering my question so quickly! After spending some time tinkering this weekend, you're entirely correct; my problems are all with the generated css and not the generated font. Thanks for the links to your use cases, that's very helpful.

backflip commented

@prekolna gulp-iconfont-css has run before gulp-iconfont instead of after. But I would recommend to use the glyphs event instead of gulp-iconfont-css anyway.