Docs: Better alignment of icons

[albertony]

What is the purpose of this change?

Better alignment of icons of different sizes

This reverts the changes from PR #5889 and #5701 and implements an alternative fix which is more "native" Font Awesome solution:

Font Awesome icons are designed on grid and share a consistent height. But they vary in
width depending on how wide or narrow each symbol is. If you prefer to work with icons
that have a consistent width, adding fa-fw will render each icon using the same width.

(https://fontawesome.com/docs/web/style/fixed-width)

The original solution had wrong css, as a result of misunderstanding the precedence of element,element and element element selectors, leading to an issue with icons in backend doc headers.

Before:

After:

As a bonus, it also gives slightly better results for the menu/dropdown icons which was the focus of the original PRs.

Before:

After:

Was the change discussed in an issue or in the forum before?

Checklist

• I have read the contribution guidelines.
• I have added tests for all changes in this PR if appropriate.
• I have added documentation for the changes if appropriate.
• All commit messages are in house style.
• I'm done, this Pull Request is ready for review :-)

[ncw]

On first glance this seems like a lot of repetition instead of a few lines of css?

If only you could include other css classes into a css class...

[albertony]

I see what you mean, but... :) I think there are already repetition with all the fa fa-book etc. And I think it is just as clean with the fa-fw, letting it be handled by Font Awesome css, than the css width, alignment setting - which although more centralized, feels a bit like a hack (although I'm not a css guru, so it all feels a bit hacky at times... :)

[ncw]

OK I agree!

Let's merge :-)