Learn CSS icons in 3 minutes 🏠

hey yeah everybody in this video i thought we could do something a little bit different in this video i'm going to direct you to a useful resource in which you can use free icons for your websites the name of this website is font awesome this isn't a sponsorship or anything like that i just tend to like to use this website for free icons so there is a free version i'm going to start for free and you just need to set up an account so enter an email address and then create and use this kit then it's just a matter of verifying your email address to create an account after signing in you'll need to add your kids code to a project this is a small script so i'm going to copy this kit code and within the head of my html document i'm going to paste it and now we can search for some icons at the top menu of this website we'll go to icons and we can search a lot of these you do need a paid account but there's a lot of free icons as well so let's look up any free icons let's look for a home so click on an icon you can select a size and a background color and choose this icon click on start using this icon all you have to do is copy this html code and then someplace within the body of your document you can paste it and we now have that house icon so let's search for a few more how about twitter select a size and a background start using this icon copy the html code and then paste it okay one more how about youtube so again select an icon select a size select a background start using this icon copy this code and paste it okay let's style some of these elements let's change the color of our twitter icon so this portion here is the class name f a dash twitter so type dot for classes f a dash twitter and let's change the color property i think aqua is fairly close to the original logo color and let's do the same thing with youtube so dot fa youtube and i will change the color to red and you can add really any css properties we can also turn these into hyperlinks so i will surround one of these elements with a pair of a tags then i will set the href attribute equal to a url then when i click on this icon it takes me to youtube it wouldn't be a bad idea to place some of these within the header or the footer of your webpage so yeah those are font awesome icons and how to style them using css so if this video helped you out please be sure to help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro

Channel: Bro Code

Views: 28,627

Keywords: font awesome, font awesome icon, fontawesome, icons on website, add icon on website, web development icon, how to add icon on website, website design icon, icons for web design, icon now showing, icon not working, font awesome error, fontawesome error

Id: dHpMIy517E4

Length: 3min 3sec (183 seconds)

Published: Tue Sep 07 2021