How to Add Font Awesome Icons in Vue 3

hello everyone my name is suboptimal engineer and i'm just a typical indian guy that makes videos about web development and productivity in this video i'm going to go over how you can add font awesome icons into your vue.js project and before we get started i'm going to ask for one small favor from you guys and that is to leave a like for the youtube algorithm i recently quit my tech job so i don't have a steady income coming in i make about a dollar a day on youtube adsense so it would be really helpful if you guys could like and promote these videos so that more people can reach it and i can actually make somewhat of a living for making tutorials online cool with that out of the way let's jump right in font awesome is a icon library it has a collection of different icons so you can just ch go to their website fontawesome.com and check all of them out but as you can see they have tons and tons perhaps like thousands all right so it looks like it's 7 865 anyway they have a ton of icons and you can import them into your projects and they provide easy integrations with things like figma vue.js angular and react so today i'm going to go over how you can add these font awesome icons into your vue.js project so in order to add icons into a view project you need to first create a view project so let's do that real quick and i'm going to do that with the view cli so we're going to run view create and let's just call this icon test or something like that so just call it whatever you want we're just gonna be working with view three that's the important thing here so i'm gonna select manually select features but you could probably just select view three right over here i'm gonna do manually select features i'm gonna ensure i click view three do the airbnb config just because that's the way to go usually save on land and yeah so basically all i'm doing right now is setting up a new view project and the view project is called icon test and in this project we're going to add font awesome library to get icons up and running so it does take a little bit of time to build this project so i'll see you guys once it's been built now that we created our icon test review app let's cd into it and just make sure that everything is up and running you just run npm run serve and go to localhost 8080 and once you get here if everything is set up properly then you should see the default view page now the first thing i want to do is just a little bit of setup for the project and that is to say just delete a ton of stuff that we don't really need so i'm going to delete this hello world component save that and you'll see here that we just have the view template and inside of here we want to add the icons so how do we do that well first in order to add the icons we have to install some packages the first one is the font awesome svg core and the second one is the actual icon package so let me explain to you what is going on as i install these packages so yep i'm just running the npm install the font awesome svg core package is a i like to think of it as a utility package right it provides a few functions that you can use to import icons into your view project that's the way i like to think of it you're not actually importing any of the icons with this svg core library you're importing functions that allow you to import icons into your projects so you're not actually getting any icons from here just keep that in mind that was very confusing to me at first so that's what the svg core library is the next thing we're going to do is actually get some of the free icons and import that into our or install that into our project directory and now we have it installed but in order to import these svgs into our project we have to do a few things we're going to do import library from font awesome svg core so as i mentioned the font awesome svg core package has utility functions it doesn't actually have the svgs it has utility functions that allow you to import images and svgs into your project so this library function is or this library class i guess something that allows you to import icons into your project so let me show you what i mean so let's actually import some project uh some icons into our project so so i think if you have vs code intellisense you get these auto suggestions which is really nice so you could press control space and you'll see all the things that you can import now you can import these individually or you can import all of the svg icons as you can see there's a ton a ton of different svg icons you can import for now let's just add all of them so now we have the library we have the svgs in fast but we have to add it into our project so what we're going to do is say library dot add fast so fas stands for font awesome solid we have svgs inside of our view project but we can't display these svgs we have to import a component a view component built by the font awesome team that displays these svgs for us when you are downloading the font awesome component well at least what i did was i previously just installed like this and i believe what that does is automatically gets you the latest package but that is incompatible with view three component that works with view three you're going to want to download the pre-release version and so let's just do that real quick so now we have that component which we can use to display stuff in our view app but we can't call that component yet so we have to import that component and tell our view app to use this component so how do we do that this is the library that we want to so it contains a few separate types of components the component that we care about is the font awesome icon component and so once you've imported this we want to tell it to our app that this component exists and we do that by oops one sec we do that by when we're creating the app once we create it we add a component like so we can call the component whatever we want i'm just going to call it fa and pass in the font awesome icon component so yeah i mean now we have font awesome available inside of our view project say for example we wanted to add a coffee icon all we do is write fa pass in the icon the name of the icon and the name of the icon is going to be coffee and again this is the component that we just added inside of our main.js file in if we go to our project and we start running it we should see the coffee icon it's going to be pretty small compared to the view icon but we should still see it there we go so we got our coffee component or sorry our coffee icon my mistake and yeah i mean this is how you can add icons to your project let's do another one like user maybe let's do the bird that looks like the twitter bird so i think that's a dove so yeah you should see that these three things are right over here a little bit small but hopefully you guys let me comment this out and maybe zoom in yeah so as you can see we got the icons in our project and now the last thing that we probably want is icons like facebook github google twitter something like that right we want to maybe display a twitter bird or the youtube icon so how do we do that is it as simple as changing this to youtube well actually it's not you have to import the brand icons so right now we've only got these solid free svg icons in our project and we are only adding them we're only adding those into our library so we can only reference anything that looks like this so we just do it yeah so we can only reference these icons but we also want to add the brand icons so that is another npm install so let's see here oh there it is we've got the npm install to install the brand icons and that's just free brand svg icons so as we're installing that we can that as well so let me change this to s free brand icons and the free brand icons are spelt f a b so font awesome brand and right now we still won't be able to use these brand icons in our projects so we want to add that to our library and once we add that to our library inside of our project this you would think would work but actually it doesn't because the icon defaults to font awesome solid so basically let me tell you guys in simple terms what this is doing the icon when you pass in something like coffee right if you say say you pass in coffee what it's doing on internally is it's passing it's going like this oops so internally if you look at the library itself it defaults to font awesome solid so when you just pass in coffee let me just show you to clarify oops so when you just pass in coffee that's the same as passing in this array and if we do an npm run serve you'll notice exactly what i'm talking about you should see two coffee icons on our view project yeah so you got the two coffee icons so for the solid icons there's a default so if we want to pass in the brand icons like a youtube brand then what we have to change is this to fab which stands for font awesome brand and maybe pass in youtube like this and if we refresh yep there you go you got the youtube icon so yeah that's sort of how you can download solid svg icons and brand svg icons and i think you guys get the idea you can figure out how to do the other types of icons as well into your projects and the last thing i want to talk about is importing specific icons into your project so right now what we're doing is we're importing all the solid svgs and we're importing all the brand icons but doing that in a view project is very very bad because if you check how many brands icons there are you can just do fa and you'll notice that there's a ton of brand icons that you can import and by doing fab i believe what we're doing is we're importing all of them we're importing all of these icons but we don't want to do that that would make the bundle size or like when you i'm not exactly sure what happens but basically it's not a good idea to have all of these imports so ideally what you do is you import the specific icons that you want and you change them like this so rather than importing all the brand icons i'm only importing the youtube one and so this should still work if i refresh the page let me do github just to show you guys fa github and let me add the faa github and let me change this to github so now we should see the coffee icon the youtube icon and the github icon cool and you'll notice here that if i didn't add this like the fa github and i remove this that uh the github thing just won't appear yeah so you want to probably do the same thing for the solid icons you probably want to import the specific coffee svg solid icon and add that to the library this is just a way to keep your uh i guess not import all of these unnecessary things and just kind of keep your i think your bundled code a little bit shorter or i guess maybe a lot smaller i don't know i don't know the exact terminology for this so anyway that's just what you probably want to do um so yeah that's going to be it for today's video hopefully you guys learned how to add font awesome icons to your view project thanks for watching oh yeah and don't forget to like and subscribe because i really really really really want to be able to pay my bills with my youtube adsense money which i definitely can't do right now so yeah like and subscribe share thanks for watching and i'll catch you guys next time you

Channel: Suboptimal Engineer

Views: 6,212

Keywords: suboptimal engineer, suboptimal software engineer, suboptimal, basics of vue, basics of vue.js, font awesome, font awesome vue, font awesome vue js, font awesome icons, font awesome icons vue, vue font awesome icons, font awesome icons with vue, how to add font awesome icons, vue 3 font awesome, vue 3 font awesome tutorial, font awesome icons html, vue, vue.js, vue js, font awesome icons tutorial, font awesome brand icons, font awesome brand icons vue, vue icons, vue js icons

Id: MoDIpTuRWfM

Length: 14min 53sec (893 seconds)

Published: Tue Mar 30 2021