How to fix zsh icons in Visual Studio Code terminal?
#vscode#zsh#beginners#linux
Krzysztof Szala

Krzysztof Szala @avantar

About: PHP and TypeScript developer, currently working at DAZN. Don't want to miss my next article? Just click 👇

Location:
Silesia
Joined:
May 30, 2020

How to fix zsh icons in Visual Studio Code terminal?

Publish Date: May 6 '21
51 10

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.

Comments 10 total

  • tq-bit
    tq-bitFeb 12, 2022

    You put me on the right path, unfortunatly the fonts did not work for me (Ubuntu 20.04). I've used the font MesloLGS NF from this repos now:

    github.com/romkatv/powerlevel10k-m...

  • Marving Velásquez Rivas
    Marving Velásquez RivasApr 28, 2022

    I've tried this on manjaro 21.2.6, but it look worse now, icons are missing and the lines are too wide, what should I do? Try other font?

    • Guillaume
      GuillaumeMay 12, 2022

      Same for me, use the MesloLGS NF font from github.com/romkatv/powerlevel10k-m...
      It works for me.

      • rod2ik
        rod2ikJul 18, 2022

        Hi, Thanks to you all,

        I. On Manjaro
        I am using Manjaro 21.3.4 (kde) and I confirm this helped me.
        This is precisely what I did :
        1°) Install the Meslo Nerd Font :
        $ sudo pacman -S ttf-meslo-nerd-font-powerlevel10k

        2°) Configure Vscode as explained in this tuto, with :
        Terminal>Integrated: Font Family
        MesloLGS NF

        II. On ArchLinux
        1°) Install the Meslo Nerd Font :
        $ yay -S ttf-meslo-nerd-font-powerlevel10k

        2°) Configure Vscode as explained in this tuto, with :
        Terminal>Integrated: Font Family
        MesloLGS NF

        Thanks !! :)

  • Bala Hantsi 🇳🇬
    Bala Hantsi 🇳🇬Nov 11, 2022

    This is awesome

  • Matej
    MatejDec 23, 2022

    For me the branch glyph and others worked when I open "Ubuntu for Windows" terminal, as well as "Windows Terminal" on Ubuntu WSL, but not in VS Code's integrated terminal.

    Following the above steps resulted in a weird very spaced font, also without glyphs.

    Following the above procedure, but replacing "Hack Nerd Font" with "DejaVu Sans Mono for Powerline" (which I had previously already installed in Windows) worked like a charm.

  • Jason Van Malder
    Jason Van MalderDec 23, 2022

    Thanks. Hack Nerd Font was not working for me I just typed Hack instead.

Add comment