Include documentation on how to use the generated font
Closed this issue · 3 comments
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"></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.
@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:
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.
@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.