❗❗Maintainer Note❗❗

I'm posting this here at the top so that people can immediately find it.

When using Nerd Fonts in polybar, many icons will either be cut off, overlap adjacent characters, or not have enough spacing after them.

There are several ways to work around this.

• Use a non-nerd fonts font for regular text and use the symbols-only variant (Symbols Nerd Font Mono) font as a second font for the icons because the symbols-only fonts don't have that issue. The symbols-only fonts are released in the file NerdFontsSymbolsOnly.zip.
• Use the monospaced version of the nerd font. For example if you are using XYZ Nerd Font, use XYZ Nerd Font Mono instead. This will make all icons the same width as regular text; they may appear too small though.
• Don't use Nerd Fonts. Nerd Fonts just pulls together multiple fonts, the individual fonts (material design icons, font awesome, etc.) don't have this issue as far as I can tell, using them directly should work.
• Manually add one or two extra spaces after every icon you are using. This is really not recommended.

For those interested in the details, read on.

What is happening is that when rendering an icon, our font rendering library (cairo) tells us how many pixels we should advance when rendering the next character.
In the non-mono versions of nerd fonts (except the symbols only variant) that is less than the actual width of the rendered icon.
This causes the icon to be cut off if there is a formatting tag after the icon.
In the other cases, the icon will overlap with the subsequent characters (missing spacing after icon is it simply overlapping with the spacing that should come after it).

This behavior is actually kind of intended according to nerd fonts, have a look at one of the maintainers' comments describing the situation: ryanoasis/nerd-fonts#442 (comment)

Original Post:

I'm seeing this behavior with only a couple fontawesome characters: