This brief tutorial explains what is Nerd Fonts project, how to install Nerd Fonts in Linux and how to add glyphs (icons and symbols) in your code or simply print the icons in the shell with Nerd Fonts.
Nerd Fonts - The developer targeted patched fonts
Nerd Fonts is a project to create patched fonts. A patched font is a font that has a bunch of icons patched into it. Nerd Fonts takes popular programming fonts and patches them with a large number of glyphs (icons). The glyphs are added from popular iconic fonts such as Font Awesome, Devicons, Font Logos, Material Design Icons, Powerline Symbols, Octicons, Weather Icons and many others.
Nerd Fonts currently includes 50+ patched and ready to use best developer fonts. All the patched fonts have 3,600+ icons and symbols combined from popular icon sets. The Nerd Fonts project also has a Font Patcher script which allows you to create your own customized patched fonts. It is a free and open source project hosted in GitHub.
Install Nerd Fonts On Linux
Installing Nerd Fonts is as same as you normally would install fonts on Linux. Download your preferred nerd font from the official Nerd Fonts download page. Extract the downloaded zip file and copy the fonts to your system's
fonts folder. The location of your fonts folder varies depending on the Linux distribution you use.
In Debian-based systems like Ubuntu and its derivatives, copy the font files to
/usr/local/share/fonts/ location to install fonts for all users i.e. system-wide. If you want to install fonts for a particular user, copy the fonts to
~/.local/share/fonts/ location. I wanted to install fonts for my current user account only, so I copied the fonts files to
You can also do it from command line like below. Use
curl to download the font files. Extract the zip file using
unzip and then copy the font files to the
fonts directory using
$ wget https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/Hermit.zip
$ unzip Hermit.zip
$ cp ~/Downloads/Hermit/Hurmit*.otf ~/.local/share/fonts/
If you have a lot of fonts, you can use sub-directories to organize the font collection.
$ yay -S nerd-fonts-hermit
After copying or installing the fonts, run the following command to build font information cache files for applications using
fontconfig for their font handling.:
$ fc-cache -fv
/usr/share/fonts/type1: caching, new cache contents: 0 fonts, 2 dirs /usr/share/fonts/type1/gsfonts: caching, new cache contents: 35 fonts, 0 dirs /usr/share/fonts/type1/urw-base35: caching, new cache contents: 35 fonts, 0 dirs /usr/local/share/fonts: caching, new cache contents: 0 fonts, 0 dirs /home/sk/.local/share/fonts: caching, new cache contents: 68 fonts, 0 dirs [...]
Similarly, download the other fonts and move them all to system's
fonts directory and update the font cache.
Verify if a specific font is added or not from command line using
$ ls ~/.local/share/fonts/ | grep Hurmit
Hurmit Bold Nerd Font Complete Mono.otf Hurmit Bold Nerd Font Complete Mono Windows Compatible.otf Hurmit Bold Nerd Font Complete.otf Hurmit Bold Nerd Font Complete Windows Compatible.otf Hurmit Light Nerd Font Complete Mono.otf Hurmit Light Nerd Font Complete Mono Windows Compatible.otf Hurmit Light Nerd Font Complete.otf Hurmit Light Nerd Font Complete Windows Compatible.otf Hurmit Medium Nerd Font Complete Mono.otf Hurmit Medium Nerd Font Complete Mono Windows Compatible.otf Hurmit Medium Nerd Font Complete.otf Hurmit Medium Nerd Font Complete Windows Compatible.otf
List all available fonts in your system using command:
Add Glyphs In Your Code With Nerd Fonts
Once the Nerd fonts are added to your system, you can literally use them anywhere on your system. I tried Nerd Fonts in Deepin Terminal, GNOME terminal, gedit, and Gimp. All worked just fine and I can be able to add different types of icons and symbols in the text and the code.
Go to the Nerd Fonts cheatsheet where you can find a lot of icons and symbols and pick a icon you want to use. There is a Search bar available to quickly search for a specific icon or symbol. To show all available icon sets, place the mouse cursor in the search bar and hit ENTER.
To copy an icon or symbol, just hover the mouse over it and click Icon or Class or Hex code to copy it.
Paste the copied icon wherever you want.
You can also copy the class and paste the code in your
HTML code. Here are two examples for your reference.
I really <i class="nf nf-fa-heart"></i> <i class="nf nf-custom-vim"></i>
I use <i class="nf nf-linux-archlinux"></i> btw.
Print icons and symbols in Shell using Nerd Fonts scripts
If you don't want to copy the glyphs from the Nerd Fonts cheatsheet web page, use the Nerd Fonts scripts to directly print the icons/symbols in your shell and then copy them to your code or wherever you want.
Download the scripts provided here and save them in
~/.local/share/fonts/ directory. I am going to download Font Linux icons using command:
$ wget https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/bin/scripts/lib/i_linux.sh -P ~/.local/share/fonts/
Source the download script:
$ source ~/.local/share/fonts/i_linux.sh
Verify if you can able to print the icons in the Terminal using any one of the following commands:
$ echo $i_linux_archlinux
$ echo $i_linux_centos
$ echo $i_linux_debian
$ echo $i_linux_fedora
$ echo $i_linux_ubuntu
As stated already, there are currently 50+ patched fonts available to use. If your favorite font isn't already patched, you can patch it using Font Patcher script made by the Nerd Fonts author. For more details, refer the project links given below.