sharkcat - nerd fonts guide

So you found out about Nerd Fonts icons and want to use them but the example usage section on the cheat sheet wasn't explanatory enough to know how to use it? Well I was in the same boat and I figured it out through trial and error so I wanted to put my method here for others to use. This guide will focus on using it for html + css/websites as opposed to terminals or the such since thats what I have been using it for.

Installing

Import Online Version
Locally Install

Import Online Version

Arguably the easiest way to install but needs to be added to all pages that you want icons on alongside normal css
In your html head block enter the css url as a stylesheet as seen in the following:

Locally Install

Download the CSS sheet and the symbols font (and unzip)
Add both of those files to your site files
On your css sheet, link to the webfont css sheet like so:

@import url("../webfont.css");

with ../webfont.css being replaced with the path to where you put your sheet
In the CSS sheet, you need to change the src of the font itself. It's going to look a bit like a mess but at the start you will see this

@font-face{font-family:'NerdFontsSymbols Nerd Font';src:url("../fonts/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");

replace the src:url(../fonts/Symbols-2048-em Nerd Font Complete.woff2) with your path. The download I have linked is a ttf file so you will need to change the format as well to format("truetype").

src:url("../fonts/NerdFontsSymbolsOnly/SymbolsNerdFont-Regular.ttf") format("truetype");

Usage

Displaying Regularly
Displaying as Bullet Points

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.

Displaying Regularly

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

Icons can be used as replacements for the bullet point icons instead of just display the icon before a list item. This can be achieved with three bits of css.
1. Remove the default Points

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

2. Set the font, and position the (currently blank) icon in place.

ul li:before {
    font-family: 'NerdFontsSymbols Nerd Font';
    position: absolute;
    left: 0;
    padding-top: 0.1rem;
}

3. Choose and set the Icon

ul li:before {
content: "\f011b";
}

The content bit is the hex code with a backwards slash in front

The positioning of the icon and any padding will very much depend on your pre-exisitng css so be sure to edit it to suit

now some of my favourite icons i've used/found for funsies
icon class:
nf-md-cat
nf-md-snake
nf-fa-arrow_right
nf-fa-mouse_pointer
nf-md-book
nf-md-jellyfish
nf-fa-picture_o
nf-cod-terminal_linux
nf-md-linux_mint
nf-md-shark
nf-oct-star_fill
nf-md-sword
nf-md-cube_outline
nf-md-fountain_pen