Getting html items to align vertically can be a challenge...
This is the easiest solution I have found so far:
Most of the time you'll probably only need the translateY lines.
Note: using notations like 5px or 1em for transform:translateY might be easier/more logical in some circumstances.
Source:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
You may get blurry results when using percentages - especially in Chrome.
Adding this to the parent element should solve this, see Label 3 in the example:
And if that does not work, the problem could be the -50% for the translateY. If you change that to pixels, you might get better reults. See Label 4 in the example.
An internet search on the "blur" subject results in a lot of suggestions and possible fixes, but none of those seem to work when I try them...
Label 5 looks messy in Chrome since version 37 and the newer Firefox versions, fine in some other browsers - but only on some (Windows) PC's. The only reliable solution seems to be to disable hardware acceleration in the Chrome settings, so it's probably related to the GPU and drivers. But no pure CSS solution alas...
Note: In the latest Apex versions, you have to choose between either Font Awesome or Font APEX to use in a theme, but you can use both if you want.
Maxime Tremblay has a nice blog post on that topic:
http://max-tremblay.blogspot.com/2018/01/use-font-apex-and-font-awesome.html. I have used his method for my site as well, so I'm also using the fawe prefix in these examples.