node.js - Grunt-Webfont Generates offset on glyphicon icons in CSS -


not long ago ran glyphicon generation css tff through grunt-webfont on mac os x yosemite. had new icon add reason icons don't align anymore after new run.

the red box icons should be.

the icons should this:

icons centered

the sizing of icons in image 1 wrong, 25x110 in image 2 50x50 should be.

the css in example follows:

.icon {   font-family: "icons";   font-size: 50px;   background-color: red; } 

the html:

<div id="icon_test" class="icon icon_movies"> </div> 

and svg:

<?xml version="1.0" encoding="utf-8"?> <!-- generator: adobe illustrator 18.0.0, svg export plug-in . svg version: 6.00 build 0)  --> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"      viewbox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css">     .st0{fill:#666666;}     .st1{fill:#808080;}     .st2{fill:#4d4d4d;}     .st3{fill:#ffffff;} </style> <g id="grid">     <polygon class="st0" points="67.5,54.7 132.5,100 67.5,145.3     "/> </g> <g id="layer_1"> </g> </svg> 

my grunt-webfont config unchanged:

module.exports = {   icons: {     src: 'client/icons/*.svg',     dest: 'public/fonts',     destcss: 'public/css',     options: {       embed: ['ttf'],       font: 'icons',       types: 'ttf',       hashes: false,       htmldemo: false     }   } }; 

has encountered problem before?

apparently occurred when @ least 1 of sag files hade non 0 0 coordinate view box.


Comments