Issue: [4.1 Alpha 2] FA5 category page icon too wide and is cut off

Unfortunately the makers of Font Awesome saw fit to redraw all existing glyphs when making version 5, so icons will look slightly different in some way. Not all glyphs have the same aspect ratio anymore. And because not all glyphs have the same aspect ratio, it creates a problem when trying to use certain glyphs in a way that looks visually consistent with the rest of XenForo.

Using CSS, there is no way to make font characters fit into a specific width or into a container. They are only drawn based on one dimension (font-size) which is related to the height difference between the top and bottom of the font's tallest and lowest characters. That is the way fonts and CSS work together. It is entirely possible to design a font where one - character looks like this: ---------------------------, and another character looks like this =. Placing both characters side by side using the same font-size (the font-size I am typing in now), we have:
= ---------------------------
There are two ways to deal with this situation when we want either to occupy a defined width:
1. Crop anything larger than the width
2. Use different font sizes for different characters

Fortunately in VaultWiki, specific page-types provide extra CSS classes which allow us to modify the font-size of some icons on a per-type basis. It will also make the characters look inconsistent in terms of height, which will be especially noticeable in content lists that contain multiple page-types.

In the next release, I reduced the font-size of the following types by 20% in title-boxes and content-lists: category, template, discussion. The widths now fit inside the container, but again the heights are now shorter than other icons so they may look strange near each other. However, this will probably make icons that use custom characters look weird, since it wouldn't be based on the correct page-type. In that case, custom styling might be necessary. We may try to handle this in the future if it becomes a big issue.

One other tweak I made involved calculating the font-size for all characters in a way that considered the border and padding of the icons in certain contexts. This change resolves the issue of the area icon being cut off slightly. But by itself it did not resolve the category icon issue because of how much wider that icon is.

These changes are made in XenForo 2.1 only because it supports LESS and because I have only noticed the issue with the FA5 versions of the characters.