How to give font-awesomes icon a fixed width?

Put your icon inside the element and make it behave as an inline-block so you can change its width and margin.

http://jsfiddle.net/LeBen/B9yjd/

Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.

Why having empty elements if you only want a background image for an element?

Just add the icon as background-image and set the padding-left for all these elements to the required value.

As an update to this, FontAwesome now has fixed-width support built in.

<i class="fa fa-fw fa-user"></i>

The fa-fw class supplies the fixed-width style.