Learn CSS icons in 8 minutes! 🐤

hey what's going on everybody in this video I'm going to show you how we can create some font awesome icons using HTML and CSS all right let's get started everybody I'm going to direct you to this website font awesome.com this isn't a sponsorship or anything like that but this is a pretty good place to get some icons Google Icons is another good source but I find that font awesome does have a larger variety of icons to start using icons from this site from the home page we will start for free because I don't like to pay for things you will need a kit you can type in your email like fake gmail.com then send kit code then you just have to confirm your email now once you log in you'll have access to a kit if I were to click on my kit I have a line of JavaScript that contains a link to my kit there's going to be a unique number let's copy the script then place it in the head of our HTML document right here we now have access to those icons on font awesome to browse for icons go to the icons tab then we can perform a search I would like an icon of a home or a house I would like this one so I'll click on it you can choose a classic style or a sharp Style with sharp corners this is solid that's regular this is light I'll stick with solid you can select animations but I won't use animations for this example you can rotate this icon you can change the color and you can change the default size this is 2xs this is 2XL to include this icon we can copy this element it's an eye element so let's copy this eye element within the body of my document I can paste that I element and there's my icon if you want to remove the color and change it with your CSS style sheet we can remove the style attribute if you need something even larger than 2XL we can change this element up to 10 times the size with 10x that's a little too large for my liking let's go with 5X let's find three other icons that we would like I'm going to find the Twitter logo that's right here I need to copy this eye element then I will paste it then I'll change the size fa-5x okay Twitter YouTube would be good copy this eye element paste it again I would like the 5x version fa-5x let's select one more icon let's go with tick tock and that is all we'll need again I would like the 5x sized version all right that's a good amount of icons I will Center all of these icons one way in which I can do that is to place all of these elements within a div with the class of icons all right let's go to our style sheet I will take my class of icons then text align Center to right justify these we can set that to right but I'll keep them in the center I'll change the color of these icons let's begin with our house we'll need to copy this entire class I don't want the sharp version I will copy this entire class then within my style sheet I will select that class dot then paste the name of that class now we can't include spaces you can replace the spaces with the DOT with our house icon let's change the color to something Gray let's go with the lighter color like that okay let's do this with the other icons then we have Twitter replace the spaces with dots I will change the color so let's try and find Twitter blue I think that's fairly close okay then we have YouTube color red then tick tock I think that's fairly close all right now what we'll do is turn these icons into hyperlinks we'll surround each eye mint with a pair of a tags foreign then within the href attribute we can set that to some website I won't set the href attribute to our house icon let's do that with Twitter Youtube and tick tock so with Twitter I will set the href attribute to be https colon to forward slashes twitter.com let's do this with our YouTube icon replace Twitter with YouTube then tick tock so this should work let's click on Twitter that works YouTube and tick tock with hyperlinks there is some underlying text decoration included let's remove that let's take our icons then any anchor tags within our icons class we'll set the text decoration to be none that should remove them I'll also apply a little bit of margin between each of these icons let's do margin Dash right set to 20 pixels not bad for some additional practice when we hover a cursor over one of these icons let's increase the lightness let's begin with our house let's copy these CSS properties paste them we'll apply the hoverseudo class I'll increase the lightness by 10 percent I went from 66 to 76 percent when we hover our cursor over our house icon it should be a little bit lighter okay let's apply this for the other icons then we have Twitter apply the hoverseudo class oh I'm using RGB values let me change that to hsl I'll increase the lightness to 60. let's do this with YouTube then tick tock all right now when we hover our cursor over these icons they should be a little bit lighter Tick Tock is still a little bit dark let me increase it further to 30 percent that's much better all right everybody so that is an introduction to including icons in your web page using CSS

Channel: Bro Code

Views: 27,545

Keywords: CSS course, CSS tutorail, CSS icons, html icons

Id: k3AJx11k9QY

Length: 8min 32sec (512 seconds)

Published: Thu Sep 21 2023