Как правильно задать размеры иконки для шрифта?

Question

[maolo]

Не могу ни найти статьи, где бы показывалось как правильно рисовать иконку, ни сам не могу подобрать нужные параметры, чтобы иконка выравнивалась по baseline во всех браузерах.

То, что сам сумел более-менее подобрать - на канвасе 32х32, но все равно приходится позиционировать иконку на +1px, т.е.:

.icon:before {
position: relative;
top: 1px;
}

Скачал svg из fontawesome - никакой закомерности не увидел.
Попробовал, как в некоторых иконках fontawesome, использовать 28х28 с отступом в 2px (и сверху пробовал, и снизу) - разное смещение получается в ФФ и Хроме, если в одном идеально, то в другом смещается, и наоборот. Вручную что ли каждую иконку там позиционируют?

Подскажите, пожалуйста. как правильно разметить канвас?

P.S. Для сборки шрифтов использовал Icomoon и Fontcustom

Answer 1

[maolo]

Нашел ответ здесь:

FWIW, the font metrics in fontcustom are set up for 512pt square, with 448pt ascent and 64pt descent. So if you set up each icon in an artboard that's 512pt square, with a grid line running horizontally 64pt from the bottom, you should get the right output.

т.е. отступ снизу должен быть 1/8 от высоты канваса, т.о. для иконки 512px отступ снизу составит 64px, а непосредственно высота самой картинки будет 448px.