0:00
Hi guys, today in this video, we will learn how to add an icon on the website and here
0:06
we will use the Font Awesome icon. So let's come to the official website
0:11
Just type Font Awesome on Google and you will get this website fontawesome.com
0:16
Here you can see the current version is 5.15.3. So let's click on this start for free
0:27
Just click here and here it is asking for your email id
0:32
Enter your email id and click on this button, send kit code
0:37
And the second method is use this download option and download the file on your PC
0:43
So let's go with the first option which is adding your email id and creating one account here
0:49
So enter your email id and click on this button. So it will send you an account completion link
0:58
You will receive one email from Font Awesome like this. Click on this button and enter your new password and set up your account
1:07
Once you will complete your account creation, you will come to this page
1:12
Here you can see there is a script. This is the Font Awesome kit
1:16
So you have to copy this one. Just copy this one line of script and come back to your HTML file
1:24
In this HTML file, add this script within the head tag. You can see here is the head tag
1:29
So I will add this script here like this. Now I can add any icon on the web page
1:37
So let's come back to the Font Awesome website. Now click on this icons and in this search box, we can search for any icon
1:46
So let me search for the times. You can see there is so many icons here
1:54
This icon and the second one is Pro. We can't use this one in the free account
2:00
Other icons are Pro. Let me use the first one which is free. I will click here
2:06
And here you can see HTML code. So just copy this one
2:13
Click here to copy and come back to your HTML file. Place this code anywhere on the HTML file where you want to display this icon
2:24
So I have added it here. Now I will refresh my website and you can see this icon on this web page
2:35
Let me zoom this web page so that you can see. Here is the icon
2:42
So let's add one more icon. I will come back to the search box and here I will search for another icon
2:50
Let's write Facebook. I will open this one. Then click here to copy this HTML code and come to the HTML file added here
3:05
So I have added one more icon. Refresh the website again and you can see another icon also
3:15
So this is the process to add a font or some icon with the online link
3:20
Let me tell you one more thing. If you want to design these icons, so you have to use the class name
3:27
So you can see the class name is FAS and here the class name is FAB
3:33
You can use these class also FAB. You can use these class also
3:41
So I will go with this simple one. I will just copy this class name FAS
3:45
Come to the CSS file and here I will write like this
3:50
I will add the color red. And if I refresh the website, you can see this cross icon in the red color and there
4:02
is no effect on the FB icon because you can see the class name is different here
4:09
For this Facebook, the class name is FAB. So let's copy this one and I will add it here and here also I will add color like this
4:23
Now you can see the Facebook icon in the blue color. So this is how you can apply the CSS properties on the icons
4:33
Now I will tell you the another method to add the icons on your website
4:37
So let's come back to the Font Awesome official website. Let's click on this button start, scroll down and click on this download
4:47
I will click here. Here you can see this button download Font Awesome free for the web
4:53
Let's click here and it will download a zip file. So we got this file here
5:02
Let's unzip this file. In this folder you can see we have lots of files
5:11
Let me zoom it so that you can see clearly. From this file we need this CSS file and this web fonts
5:20
These two things we need. CSS and this web fonts. This one and this one
5:26
So just copy these two folders. Copy and come back to your project folder
5:31
So this is my project folder where I have only HTML and CSS file
5:36
I will add this folder here. CSS and web fonts. So in this web fonts you can see these are the file
5:46
So don't do anything with this one. Let's come back to the CSS and here you can see we have lots of files
5:53
So basically we need this one only. All.css. We can delete other files and we need this all.css
6:01
That's it. So let's come back to the code again and let me remove this online link
6:06
I will remove this online Font Awesome link and here I will connect the local file
6:11
I will write link rel stylesheet because it is a CSS file
6:19
href in the href write the path of the CSS file. So it is in the CSS folder
6:26
So write CSS slash and the file name which is all.css like this
6:32
So this is all we have to do. Save these changes and if I refresh the website again
6:39
You can see still we can see the icon. So this was the simple method to add the Font Awesome icons on your website
6:47
I hope this video will be helpful for you. If you have any question you can ask me in the comment section and please like and share
6:52
this video and also subscribe my channel AZ tutorials to watch more videos like this one
6:57
Thank you so much for watching this video
