{"action":"created","issue":{"url":"https://api.github.com/repos/nfroidure/gulp-iconfont/issues/100","labels_url":"https://api.github.com/repos/nfroidure/gulp-iconfont/issues/100/labels{/name}","comments_url":"https://api.github.com/repos/nfroidure/gulp-iconfont/issues/100/comments","events_url":"https://api.github.com/repos/nfroidure/gulp-iconfont/issues/100/events","html_url":"https://github.com/nfroidure/gulp-iconfont/issues/100","id":124357564,"number":100,"title":"Glyph Vertical Offset In Windows Browsers","user":{"login":"Undistraction","id":161489,"avatar_url":"https://avatars.githubusercontent.com/u/161489?v=3","gravatar_id":"","url":"https://api.github.com/users/Undistraction","html_url":"https://github.com/Undistraction","followers_url":"https://api.github.com/users/Undistraction/followers","following_url":"https://api.github.com/users/Undistraction/following{/other_user}","gists_url":"https://api.github.com/users/Undistraction/gists{/gist_id}","starred_url":"https://api.github.com/users/Undistraction/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Undistraction/subscriptions","organizations_url":"https://api.github.com/users/Undistraction/orgs","repos_url":"https://api.github.com/users/Undistraction/repos","events_url":"https://api.github.com/users/Undistraction/events{/privacy}","received_events_url":"https://api.github.com/users/Undistraction/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-12-30T14:51:05Z","updated_at":"2016-01-06T19:48:00Z","closed_at":null,"body":"I appreciate that this might be caused by one of the libs you use, but I'm seeing issues with vertical alignment of glyphs in browsers on Windows (IE10, IE11, Chrome) across all font file types.\r\n\r\nI have set up a codepen here: http://codepen.io/Pedr/pen/eJBLZM\r\n\r\nCompare display of icons in Chrome 47.0.2526.106 (64-bit) OSX:\r\n\r\n![chrome-osx](https://cloud.githubusercontent.com/assets/161489/12052224/9f52fdb6-af04-11e5-94d5-0db87c79c452.jpg)\r\n\r\nWith Chrome 47.0.2526.106 Windows:\r\n\r\n![chrome windows](https://cloud.githubusercontent.com/assets/161489/12052230/b2506796-af04-11e5-929b-098e2ab6f268.jpg)\r\n\r\nMy gulpfile:\r\n\r\n```\r\nvar gulp = require('gulp');\r\nvar iconfont = require('gulp-iconfont');\r\nvar consolidate = require('gulp-consolidate');\r\nvar rename = require('gulp-rename');\r\n\r\nvar fontName = 'AppIcons';\r\n\r\ngulp.task('appIconFont', function(){\r\n  return gulp.src(['./graphic-source/fonts/app-icon-font/svg/*.svg'])\r\n    .pipe(iconfont({\r\n      fontName: fontName,\r\n      // Normalize icon sizes\r\n      fontHeight: 512, // Height of the SVG files\r\n      normalize: true,\r\n      formats: ['woff2', 'woff']\r\n    }))\r\n    .on('glyphs', function(glyphs, options) {\r\n      gulp.src('./templates/sass/_app-icon-font.template.scss')\r\n        .pipe(consolidate('lodash', {\r\n          glyphs: glyphs,\r\n          fontName: fontName,\r\n          fontPath: './src/fonts/app-icon-font',\r\n          className: 'ai'\r\n        }))\r\n        .pipe(rename('_app.assets.fonts.app-icons.scss'))\r\n        .pipe(gulp.dest('./src/sass/assets/fonts'));\r\n    })\r\n    .pipe(gulp.dest('./src/fonts/app-icon-font'));\r\n});\r\n```\r\n\r\nExample of source SVG:\r\n\r\n\r\n[Icons.zip](https://github.com/nfroidure/gulp-iconfont/files/74920/Icons.zip)\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/nfroidure/gulp-iconfont/issues/comments/169438455","html_url":"https://github.com/nfroidure/gulp-iconfont/issues/100#issuecomment-169438455","issue_url":"https://api.github.com/repos/nfroidure/gulp-iconfont/issues/100","id":169438455,"user":{"login":"nickelleon","id":189947,"avatar_url":"https://avatars.githubusercontent.com/u/189947?v=3","gravatar_id":"","url":"https://api.github.com/users/nickelleon","html_url":"https://github.com/nickelleon","followers_url":"https://api.github.com/users/nickelleon/followers","following_url":"https://api.github.com/users/nickelleon/following{/other_user}","gists_url":"https://api.github.com/users/nickelleon/gists{/gist_id}","starred_url":"https://api.github.com/users/nickelleon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nickelleon/subscriptions","organizations_url":"https://api.github.com/users/nickelleon/orgs","repos_url":"https://api.github.com/users/nickelleon/repos","events_url":"https://api.github.com/users/nickelleon/events{/privacy}","received_events_url":"https://api.github.com/users/nickelleon/received_events","type":"User","site_admin":false},"created_at":"2016-01-06T19:48:00Z","updated_at":"2016-01-06T19:48:00Z","body":"+1\r\n\r\nThe glyphs are below the intended area by ~40% in my project. I have tried every CSS technique I know of, but I don't understand the root problem, so its like shooting in the dark. After spending a day and a half trying to make it work, I finally threw my hands up and went to see if there were any open issues for this project. I'm glad that I'm not going insane because someone else is having the exact same issue! A little guidance would be great here if anyone has it."}}