I'm trying to integrate zsh on my VSC setup but apparently arrows are not recognized by it.

My zsh theme is agnoster and I've already tried adding "terminal.integrated.fontFamily": "Meslo LG M DZ for Powerline" with no success. Anyone experienced something like this and can give me a hand? Thanks.

First of all, why?

Most modern shell prompts use particular fonts (e.g. Powerline, NerdFonts, etc.) which are designed to enhance the visual appearance of terminal applications by providing additional symbols, icons, and glyphs. If you don't have this type of font installed in your system you won't be able to see those special symbols.

How to fix it?

The fix is pretty straightforward. You will find yourself in one of the following two cases.

[Case 1] It looks fine inside my everyday terminal but not in VSCode

This is the easy one. Most probably you just have to tell VSCode to use your terminal font.

1. Find out and copy your everyday terminal font

   1. Open the terminal you usually use outside of VSCode. For instance, if you are on MacOS and you're using iTerm2, go to iTerm2 › Preferences › Profiles › Text and copy the Font Name (e.g. MesloLGS NF)

2. Set the terminal font on VSCode

   1. Open File → Preferences → Settings (PC/Linux) or Code → Settings... → Settings (Mac)
   2. Enter terminal.integrated.fontFamily in the search box at the top of Settings tab
   3. Set the font name you copied at the previous step into the Terminal › Integrated: Font Family field

   

3. [Alternatively] Modify the VSCode settings.json file and add

   {
       ...,
       "terminal.integrated.fontFamily": "MesloLGS NF"
   }
   

4. Done! 🎉 Now you should see every symbol correctly

[Case 2] I'm having font issues even in my everyday terminal

If this is the case you'll probably need to install a compatible font. I like and recommend Nerd Fonts but also Powerline Fonts or Fontawesome Fonts work totally fine.

1. Download and install a compatible font

   1. Download these four ttf files:
      • MesloLGS NF Regular.ttf
      • MesloLGS NF Bold.ttf
      • MesloLGS NF Italic.ttf
      • MesloLGS NF Bold Italic.ttf
   2. Double-click on each file and click "Install". This will make MesloLGS NF font available to all applications on your system.

2. Set the terminal font on VSCode

   1. Open File → Preferences → Settings (PC/Linux) or Code → Settings... → Settings (Mac)
   2. Enter terminal.integrated.fontFamily in the search box at the top of Settings tab
   3. Set MesloLGS NF as value into the Terminal › Integrated: Font Family field

   

3. [Alternatively] Modify the VSCode settings.json file and add

   {
       ...,
       "terminal.integrated.fontFamily": "MesloLGS NF"
   }
   

4. Done! 🎉 Now you should see every symbol correctly

I don't like the MesloLGS NF font, how can I change it?

You can find many different compatible fonts, for instance here https://www.nerdfonts.com/font-downloads. Install them by downloading the tff files as explained and simply change the terminal font setting in VSCode to use them.

I recommend this site https://www.programmingfonts.org/#meslo which gives you a test drive of all the most used programming fonts!