MohxNotes

How To Fix Zsh Icons In Visual Studio Code Terminal ?

Mohammed 2 Min Read
How To Fix Zsh Icons In Visual Studio Code Terminal ?

Hey folks! So, I’ve been tinkering around with my Manjaro system running KDE Plasma, and I noticed something strange when I fired up Visual Studio Code for coding. You see, Manjaro comes with Zsh as the default terminal, and I’m a big fan of its features. But when I started using Zsh in Visual Studio Code, I ran into a problem – the cool icons that usually appear in the terminal were missing! It turns out, this isn’t just a problem on my Manjaro setup; it’s something that can happen on other systems too. But don’t worry, I’ve done some sleuthing and found a fix. Let me show you how to get those Zsh icons back in Visual Studio Code.

Screenshot: Vscode Terminal (zsh) Icon Missing

Solution

I’m using Manjaro with (KDE) and this solution worked for me:

  1. Install the Meslo Nerd Font:
  • For Manjaro and Arch based distro’s:
Konsole
 sudo pacman -S ttf-meslo-nerd-font-powerlevel10k 
  • For Ubuntu and Debian based distro’s:
Konsole
 sudo apt-get install fonts-meslo 

<p><strong>For Other Linux Distributions:</strong> The installation process may vary slightly depending on your Linux distribution. However, you can typically install the Meslo Nerd Font using your package manager. Simply search for ā€œfonts-mesloā€ or ā€œttf-meslo-nerd-font-powerlevel10kā€ and install it. Once installed, follow the same steps mentioned above to configure the font settings in Visual Studio Code.</p>

  1. Configure Vscode Font Settings: To ensure that Visual Studio Code displays the Zsh icons correctly, follow these steps:

    • Open Visual Studio Code.
    • Navigate to Terminal > Integrated: Font Family .
    • Set the font family to ā€œMesloLGS NFā€. Screenshot: Configuring Vscode Terminal Font Family
  2. Alternatively, Change Font Settings Directly in settings.json: You can also change it directly in the settings.json file located in the .config/Code/User directory. Look for the property terminal.integrated.fontFamily .

settings.json
 "terminal.integrated.fontFamily": "MesloLGS NF" 
  1. Restart Visual Studio Code: After making the font changes, restart Visual Studio Code.

  2. Enjoy Your Enhanced Terminal Experience: Your terminal font should now correctly display the Zsh icons! Screenshot: Enhanced Terminal Experience

Moreover, this method will also work for macOS users, although the font installation process might differ slightly.

Happy vscoding! šŸš€