Icon positioning is super-hacky

[schluchter]

In every component that uses icons, implementers use different strategies to make them align the way they want to. Because of the way the icon CSS is structured, it's really hard to predict how icons are going to behave when they are placed at different sizes.

Let's clean that up.

[fragsalat]

@schluchter I fixed a small bug of this while doing the demonstration page. The problem was that we used i or span elements to embed icons and those are inline and not inline-block elements. So the width and height are not fixed or predictable. So I changed the elements to be inline-block and removed the workaround with negative text indents to align the icon inside the 16x16 box. This seem to work great except that the icons have these white space around and they are not exactly 16px. But this is something you should already know. :)

[fokusferit]

@fragsalat does it mean this task is already "done " ? Because it is still in Development phase :D

[schluchter]

Create a number of sample icons without generic whitespace and upload to icon font.

[schluchter]

@fokusferit The sample icons are in the icon font. @fragsalat created a demo page:

We need to revisit this issue when the final font decision has been made so we can test the alignment with fonts that don't have the same baseline issue that Acumin Pro does.