0

I have a problem with my custom iconfont in Google Chrome, only on Mac. They are cutted off at the edge. I already tried to

  • use greater svg's and
  • prefer the SVG (before woff)
  • play with css settings

You can see it live at kuyichi.com (if you have Chrome and OSX) The icons don't have a border, the roundings are with the icons itself.

Is there anybody how to fix this?

live view: https://i.stack.imgur.com/niqcP.png

the iconpack on icomoon: https://i.stack.imgur.com/PwyCm.png

@font-face {
 font-family: 'iconfont';
 src:url('fonts/iconfont.eot?nr90fm');
 src:url('fonts/iconfont.eot?#iefixnr90fm') format('embedded-opentype'),
  url('fonts/iconfont.woff?nr90fm') format('woff'),
  url('fonts/iconfont.ttf?nr90fm') format('truetype'),
  url('fonts/iconfont.svg?nr90fm#iconfont') format('svg');
 font-weight: normal;
 font-style: normal;
}

[class^="icons-"], [class*=" icons-"] {
 font-family: 'iconfont';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icons-knit:before {
 content: "\e628";
}
Pim v.d. Vossen
  • 1
  • 1
  • show us the relevant HTML and CSS - we can't do anything without it. Also putting it into a [jsFiddle](http://jsfiddle.net/) will help. – alexwc_ Feb 04 '15 at 16:42

1 Answers1

-1

Try adding size information to your icon delcaration:

.icons-knit:before {
    content: "\e628";
    width:40px;
    height:40px;
    font-size:20px;
}
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176