javascript - Font symbols don't display correctly with css generated from gulp-iconfont -
so, i'm using gulp-iconfont generate icon font svg icons. i've set task in next way:
gulp.task('iconfont', function(){ gulp.src(['src/assets/icons/*.svg']) .pipe($.iconfont({ fontname: 'material', normalize: true })) .on('codepoints', function(codepoints) { console.log(codepoints); gulp.src('src/templates/material.styl') .pipe($.consolidate('mustache', { glyphs: codepoints, fontname: 'material', fontpath: '../fonts/', classname: 'md' })) .pipe(gulp.dest('src/styles/plugins')); }) .pipe(gulp.dest('build/fonts/')); });
console.log(codepoints)
gives me like:
[ { name: 'notifications', codepoint: 57345 }, { name: 'offline', codepoint: 57346 }, { name: 'online', codepoint: 57347 }, ... ]
i'm using codepoints in css generate like:
.md-notifications { content: "\57345"; }
and doesn't work, there empty space instead of icon. if use codepoint directly generated svg font works:
.md-notifications { content: "\e001" }
what doing wrong?
in javascript, when have backslash followed digits, creating octal escape sequence. number after slash needs in base 8 (octal).
the codepoint 57345 should given "\160001".
you can hex escape sequence using "\u" prefix. 57345 can given "\ue001".
the second 1 claim working "\e001" not right. , won't doing think does. should producing string "e001".
Comments
Post a Comment