sharkcat -> projects -> nerd fonts guide

Installation

Import Online

Importing the online css file is the easiest way to use the Nerd Font Icons but then you are also relying on their servers. This website uses the online version.

Add the following to your main css file:

@import "https://www.nerdfonts.com/assets/css/webfont.css";

If you want to only have it only individual pages then you can either add the above into the style tag of your header or add the following to link to it as a stylsheet.

Locally Install

This means you have a copy of the entire icon library attached to your website. They take up about 1.4 MB of space.

Download the CSS Sheet and the Font File and add both to your website files.
On your main CSS sheet, link to the webfont css sheet like below (your file location may be different)
@import url("webfont.css");
In the webfont.css file, change the src of the font itself to the one you downloaded. At the start you will see a this part:
@font-face{font-family:'NerdFontsSymbols Nerd Font';src:url("../fonts/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");
Replace the src part with your path such as:
@font-face{font-family:'NerdFontsSymbols Nerd Font';src:url("../assets/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");

Usage

You can find and search for all the icons you want on the cheat sheet. When you've found the icon you want to use, hovering over it will bring up a copy menu with 3 options: Icon, Class, UTF-16. There is also a Hex Code in the bottom right corner. We will be using the class and the hex code.

Regular

To display an icon we need to use the format

For example, to display the cat icon () we need to type

The size of icons can be altered by changing the font-size of the i attribute. The same goes for colour.

Displaying as Bullet Points

Bare minimum code to replace the bullets while remaining close to default styling:

ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding-left: 1.2rem;
}

ul li::before {
    font-family: 'NerdFontsSymbols Nerd Font';
    content: "\f246";
    font-size: 12px;
    margin-right: .5rem;
}

Your mileage may vary depending on what css you already have so edit if need be.

To change which icon is used, change the hex code under content, ensuring to retain the backwards slash.

main

contents

meta