Wrong grid used for iconset FontAwesome

[Tklaversma]

Before you compile icons, the icons are sized in a grid. For example 15x14. When compiled to SVG, this grid translates into a viewBox.

So, what I found out is that the viewBoxes for the FontAwesome icon library in your SVG are way bigger than my viewBoxes (mine is compiled manually outside this project, but we basically do the same thing).

Meaning your FontAwesome icons are not compiled from their original grid size, which is 15x14 for the FontAwesome icons. See here.

Now you are wondering, what does it matter or does it even matter....it does!
Why does it matter, I didn't found out yet, but using the wrong grid size results in icons not being shown completely when applying a font-size to it.

Let me explain / show you.

---

In order to size a SVG-icon with font-size (instead of apply an individual width and height to each icon), the following CSS must be applied.

svg:not(:root) {
    overflow  : hidden;
    ...
}

svg {
    display        : inline-block;
    fill           : currentColor;
    height         : 1em;
    position       : relative;
    stroke         : currentColor;
    stroke-width   : 0;
    width          : 1em;
}

// From hereon we can size SVG-icons by just applying a
// `font-size` to it, since the width and height is related
// to it by using `em`.

Now when I use the CSS above in combination with your SVG-icons (the wrong grid and therefor the viewBoxes), I see some icons not being shown completely. See example below:

---

How to fix this? Just apply the correct grid to each icon for each iconset before compiling.
Again, for FontAwesome the original grid size is 15x14.

[leungwensen]

@Tklaversma

Actually I started a PhantomJS process to render each icon to get they real size to build the viewBox attribute. I did this because I wanted to use icons from different vendors, and so that I removed pads around every icon.

So, the grid I am using now is the real size of each icon. I applied the style you offered here and did not found icons that were not correctly rendered. Can you provide screenshots for those icons not being shown completely to help me locate the problem?

[Tklaversma]

@leungwensen

Can you provide screenshots for those icons not being shown completely to help me locate the problem?

I'll get on that later today. I'll update this post with the necessary screenshots and information.

[leungwensen]

@Tklaversma thank you

[Tklaversma]

So I tried to recreate my issue, but for some reason I can't anymore. Did you do an update on your website? The reason I'm asking is because I used a newly generated svg-file of the FontAwesome icons..

Anyways, their seems to be no problem (anymore).
You may close this issue.

[leungwensen]

@Tklaversma I think the problem happened because you used the version before this commit f446903, in which I trimmed FontAwesome icons.