How to show Nerd Fonts in Visual Studio Code

Nerd Fonts offer a fantastic collection of icons that seamlessly integrate into various applications on your computer, from Notepad to email clients. However, configuring these icons to appear in Visual Studio Code requires a specific setup. In this article, we will guide you through the process of displaying Nerd Fonts within Visual Studio Code.

Installing Nerd Fonts

To install Nerd Fonts, follow the official website's instructions. If you're a Mac user, I recommend using the 'brew' command for the installation. You can find the fonts and installation details at:
https://www.nerdfonts.com/font-downloads

Setting Visual Studio Code

Without proper configuration, Visual Studio Code unfortunately doesn't display Nerd Fonts icons correctly. Therefore, you need to perform the following setup in your Visual Studio Code:

1. Open the Settings Page.
2. Search for settings using the keyword 'terminal.integrated.fontFamily'.
3. Enter "'Hack Nerd Font'" into the 'Editor: Font Family' field, as shown below:

The steps outlined above are demonstrated in the following movie:

(Note: I attempted to configure the settings according to the official website's instructions as https://code.visualstudio.com/docs/terminal/appearance, which suggested using "Hack NF" for the 'Editor: Font Family' field. However, this didn't work as expected. Instead, using "'Hack Nerd Font'" in the field worked properly.)

Conclusion

After configuration, Nerd Fonts icons appear in your Visual Studio Code.　Have a good VSCode life!