我的gulp iconfont渲染像一个丑陋的实时跟踪图标

Question

I noticed my icons look off when I zoom in to my navigation. I'm using Gulp-iconfont (npm package) with just the default template and styling as in the link is described.

My HTML:

<li class="pageNav_metaItem">
 <a href="#" class="pageNav_metaLink"><i id="open-apps-bar" class="icon-apps"></i></a>
</li>

Rendered font .svg file .

Can anyone help me with this issue?

Answer 1

As I see , all your icons don't feel well. To fix it add the fontHeight setting to the gulp-iconfont configuration:

// ...
.pipe(require('gulp-iconfont')({
    fontName: 'icons',
    formats: ['eot', 'woff', 'woff2'],
    fontHeight: 1024
}))
// ...