Add Icons to your Fonts with Nerd Fonts

in this video we're going to be taking a look at nerd fonts so as always you can find all the commands that I run in this video as well as relevant documentation over on my blog I'm gonna leave two links at the bottom to the nerd font repo and the nerd font website alright so let's take a look at this picture here so what is a nerd font so nerd font is essentially a developer font or a font that is often used to write programs with or something like that that is patched with a bunch of icons from these iconic fonts here things like font awesome if you've heard of that whether icons octa cons are material design icons so each one of these fonts has some glyphs associated with it now imagine if you took all of the icons here and you aggregated them and then you applied them to a font so that that font could use all of these icons and that's what a nerd font is so our options for nerd fonts if you head over to their repo this is one of the links that I had in the blog alright so if you scroll down and we can make this a little bit bigger you can see the same picture and now if we scroll down to the the patched fonts here then you can see like okay so these are all my options for fonts that have all of the icons included with them so this was like fire code nerd font hack nerd finds another popular one there's like Roboto there's Roboto there's a boon to in here so there's a bunch you have a lot of options right now also what we can do is we can take a look at actually installing them so I guess before we install them something that we should do is take a look at what we get with one of these fonts why you would want one so maybe you work on or maybe you've seen people use like vim or neo vim and you can see these cool icons inside them right and so the how I'm able to show these is I'm using a nerd font also imagine that you were gonna work on like a bar up here at the top of your screen and you want to have these cool icons like for Wi-Fi or you know whatever else maybe sound or something then you're gonna need a something like a patched font set or one of the one of these fonts here to display these glyphs right okay so now we know what we're getting with one of these so where can I get a big set of icons that I can use once I've installed one of these and we're gonna go over installing a nerd font but I just want to show you where you can get that so if you head over to this cheat sheet and how I got here was I left a link in the description to this page here this is the nerd fonts home page you go over to the cheat sheet you can come into this this search bar here press ENTER and you can just wait a second and now every single little icon that comes with your font will be inside here so now what you can do is you can press you can click on the little icon next to it and then we can paste that into your terminal if you're using a nerd font in your terminal which you should be and we can just you know pace whatever you want here and as long as you're using a nerd font it'll show up alright so that's basically what we're getting out of this we're getting the ability to show all of these icons okay so let's now talk about installing one so there's two kind of useful ways in my opinion to install them there's a bunch of ways to install them over on the repo I think they give seven options for installation also they do give an option for patching your own font if you're interested you can read more but let's talk about just getting them getting the basic ones installed or a basic one that you want installed so basically what you can do is you can go over to the repo scroll to the top here then click on patched fonts and remember a patched font is a font that has a bunch of icons patched into it okay so click on that the same list will be in here and so a pretty popular one is hack and that's the one that I'm using in my terminal right now now you'll have options it'll say bold bold italic italic regular so what you can do is download one from each of these groups okay so you'll click on that you'll click on complete and then now you have a few options in here so do you need all of them no the only one that you're going to need is this one here typically the one that just says hack regular nerd font complete mono will be one that I think has specific spacing to it and doesn't allow for ligatures so usually you're gonna want this one and I guess there's an option for Windows as well so this is just the hack nerd font and remember this is only for regular font if you go back there's gonna be one for bold bold italic italic and regular so like if I go to italic I'll see okay click on complete and then there's one for italic as well alright so what you're going to want to do is download each of these so one for bold one for bold italic one for italic one for regular we're just gonna you know click on the regular one to show you how to do that so I'm gonna click on this regular one and then what you'll do is you'll click download so then you know download window will pop up and you can pull it down now I already have a few installed so we're gonna go take a look at those so where should you put them once you install it well where you should put it is in home slash dot local this is little backwards here but dot local share fonts alright so we're gonna go in to dot local share fonts and then I'll print working directory to show you where I am so you can see there's a bit of a typo here but basically it'll be slash dot local which is a hidden file so you don't see it in your home directory share and fonts okay now once you're in there you can put a bunch of dot t TF Sordo TFS in here and these will be fonts available to you now we'll recursively search inside of this directory as well so if you create more directories inside here you call them whatever you want I have one called nerd fonts inside here then you can see D into nerd fonts and now this is like just a bunch of the nerd fonts that I just have installed so we're going to search for the hack one so we're gonna do LS then we're gonna pipe LS so let me show you this really fast at the top here what we're going to do is we're going to do LS then we're gonna pipe that into grep which is just get regular expression and then we're gonna want to get hack okay so we're gonna take the contents of listing this directory pipe it into grep and we're going to be searching for hack okay and so after doing that you can see okay hack is now highlighted now you'll notice the difference between some of these we have some mono ones downloaded but the ones that you're gonna be interested are these ones here okay so now if you have a terminal emulator this one's called alacrity but maybe you're using ITER maybe you're using the terminal may be using any terminal doesn't matter right then what you're gonna want to do is find in your settings where to set a font and then choose something like hack or choose something like fyra right like we have a lot of options if you go back into patched fonts on the repo you've a lot of options right I'm just using hack as an example you can use any of these I know a lot of them are really popular alright so we can go back and we can do that so how I'm getting this to happen in alacrity for instance is if I go to the config and my config for alacrity is in home config alacrity alacrity animal alright if I open this up and I come down to here for the font I can see okay well normal family hack and style regular bold hack and then style bold italic hack style italic so and so forth that's why I installed all the different ones so when it wants to show something in italic it can show something in italic alright so that's basically how you'll set it for this terminal emulator but you know as I said you can install you can use it in any terminal emulator just by pointing to that particular font there will be a section in your terminal emulator to do it now there's another good way to do this to imagine that you want to pull down some scripts or pull down some fonts in a script so what you'll want to do is you can just curl them from the git repo right so how you can do that is remember to make that home dot local share fonts directory because that's where we're gonna be putting these then for curl you're gonna need to CD into there and then this and means then after doing that and it worked curl this guy down here right so we're gonna be curling it down we're naming it this this is an example for fire code so we're gonna be naming it fire code and then we're gonna be pulling down a particular path so how do you get this path to pull it down right what you're gonna want to do is you're gonna want to go over here to whatever nerd font that you want the one that's in the example is fire code so we'll click on fire and we'll just go to the regular one here and then what you'll want to do is go to complete and click your font well we do this one right here and then you can just grab this URL at the top and you can see that it has like these % 20/20 you probably can barely see that but if you do go look on the blog you'll see the % 20 that'll just be for space that's how space is represented at a URL okay so also you'll notice that some of them are TTFN and so what's the difference and some of them are OTF so what's the difference between TTFN and OTF the difference between TTFN and OTF is TTFN is an older standard and OTF is built off of the TTFN standard and includes a few extra things and I left a link to an article kind of going over the difference between true type fonts and OpenType fonts I know that if basically the OpenType fonts are newer I'm not sure that true type fonts support ligatures but I know that opens - support them if you want to read more you can check out this link that I put in the blog alright so that's pretty much all I wanted to go over for nerd fonts in the future I can do videos about installing other fonts like things like for emojis and stuff like that or things like your font config because a lot of people I think get their font config a little messed up every now and then but for this video I just wanted to go over nerd fonts because people ask me how I get the icons in some of my videos and in my neo of em config and stuff so I figured I would kind of demystify that process so that's pretty much it for this video make sure to go check out the discord server we have a lot of people over there that are really helpful and also if you have the means you can support me over on patreon so yeah that's pretty much it for this video make sure to LIKE and subscribe and I'll see you guys in the next one

Channel: ChrisAtMachine

Views: 24,349

Rating: 4.8384614 out of 5

Keywords: fonts, devicons, vim devicons, nerd, nerd fonts, octicons, material icons, icons, font awesome, powerline, powerline icons, weather icons, linux font, mac font, windows font, IEC Power Symbols, material font, material fonts, material icon, material design

Id: fR4ThXzhQYI

Length: 10min 48sec (648 seconds)

Published: Sun May 24 2020