Icons cut off in VSCode terminal

[SylEleuth]

Everything is working fine in normal terminal (Termite) but not in VSCode (1.32.1).

Termite: VSCode:

I tried different (Nerd) fonts, used different configs, like the one with adding space after icons. It works in Termite, it moves everything like it should: but in VSCode everything stays the same:

ZSH 5.7.1 Oh-My-ZSH Sudo font, but it's the same behaviour with any other echo $POWERLEVEL9K_MODE - awesome-fontconfig

[VladimirMikulic]

The same thing happened to me. Make sure that you copy the font that you want to use in ~/.local/share/fonts and then you specify that font in VS Code settings. For example: "terminal.integrated.fontFamily": "Hack Nerd Font"

[marcuskwan]

"Hack Nerd Font" @VladimirMikulic Thank you, I was having this issue and people recommend a powerline monospaced font, but this worked!

[HymanZHAN]

I encountered a similar issue with oh-my-zsh, spaceship theme and nerdfont.

Upper left: Tilix; Upper right: Gnome Terminal; Bottom: VS Code All use MesloLGM Nerd Font Regular

First of all the rendered icons' styles are clearly different. What's more annoying is that the 🐳 icon, which should actually occupy the space of two letters, occupies the space of only one letter and masks the second space. As shown in Tilix and Gnome Terminal, there should be a blank space after the 🐳 icon but there is none in the VS Code integrated terminal, making it look very crowded.

[VladimirMikulic]

@HymanZHAN try this:

Do you use the integrated terminal in VS Code?

Solution 1)

Try to switch to the external one. Since in Tilix, everything works great set VS Code terminal to Tilix, instead of a built-in one.

Solution 2)

VS Code is built with Electron. If you know some HTML, CSS & JS you can easily style it as you want. Install this plugin: [https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css]

Open DevTools, select inspector, get class of the column that contains :whale: icon and add margin right to it.

[iilonmasc]

This is not an issue with p9k but an issue with either:

• the font in use -> ryanoasis/nerd-fonts
• the Font-Settings in VSCode Terminal

Different terminal emulators use various font-settings as defaults for example:

• default width of characters (iTerm2 for example has an extra setting called "Ambiguous Characters are double-width)
• which version of unicode is supported ( afaik unicode 9 uses some different width)
• Some terminals need the explicit "Mono" version of a font to display the regular prompt correctly (you should have a MesloLGM Nerd Font Regular and a MesloLGM Nerd Font Mono Regular or similar)

and as @VladimirMikulic already suggested you should be able to style the VSCode internal terminal with css

[bahaaador]

I managed to fixed icon cut off on my instance by changing the vscode integrated render type to canvas:

"terminal.integrated.rendererType": "canvas"

[tomwolber]

@baha2r this worked for me too

[skrishnak7]

I managed to fixed icon cut off on my instance by changing the vscode integrated render type to canvas:

"terminal.integrated.rendererType": "canvas"

This Worked! Thank You so much

[dannyxnda]

The same thing happened to me. Make sure that you copy the font that you want to use in ~/.local/share/fonts and then you specify that font in VS Code settings. For example: "terminal.integrated.fontFamily": "Hack Nerd Font"

The same thing happened to me. Make sure that you copy the font that you want to use in ~/.local/share/fonts and then you specify that font in VS Code settings. For example: "terminal.integrated.fontFamily": "Hack Nerd Font"

Work immediately, thank you!