How to fix zsh icons in Visual Studio Code terminal?

avantar

Krzysztof Szala

Posted on May 6, 2021

How to fix zsh icons in Visual Studio Code terminal?

Zsh is a popular UNIX shell used by many Linux and macOS users around the globe. It's even more powerful when you use it with a configuration framework like Oh my zsh and a fantastic template like Powerline10k. So, we set up our new shiny shell, everything works great in our terminal. Time to write some code. We run Visual Studio Code, open a built-in terminal and... something is not right. What happened to our beautiful template? Where are our sexy icons?
image

The solutions for that is simple, try to follow the steps below:

  1. Download the latest version of Hack Nerd Font, for example from here. Choose the file with ttf suffix.
  2. Extract it from the archive.
  3. Move all ttf files to /usr/share/fonts directory (or ~/.local/share/fonts/ if you don't want to use them globally).
  4. Open Visual Studio Code settings and find Terminal font section.
  5. Change Terminal › Integrated: Font Family attribute from Monospace to Hack Nerd Font. image image
  6. You can also change it directly in settings.json file (look for it in .config/Code/User directory). The property you are looking for is terminal.integrated.fontFamily. image
  7. Restart Visual Studio Code.
  8. Enjoy your new terminal font, which should now look correctly!

image

Ps. It will work the same way for macOS users, but the font installation process is a little different.

💖 💪 🙅 🚩
avantar
Krzysztof Szala

Posted on May 6, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related