How to add icons in CSS

Hello guys. Welcome to our CSS series. In the last segment, we learned about CSS fonts, how we can add the fonts, how we can modify them, how we can colour them and use different font families and its properties like font weight, font variant and font stretch like properties we had used and seen. We all saw how we can work with fonts. I hope you have tried all the properties that we had shown of fonts on your own. If the program is running properly then it's really well and good.  Okay, guys! We will go ahead with today's segment, it is on CSS icons, with the help of CSS how we can add icons and fit it in our screen or website. Usually what are icons, so icons can be defined as the images or symbols. We can call icons, images or symbols because you don't use icons like big images of 150 or 200 pixels. Normally we use small size icons. Icons means that like it is mentioned here. It is a graphical representation of a file or program that helps the user to identify the type means with the help of an icon, we are passing some information in a short way to our users.Let's say for a folder, we don't want to use any form of folder button or word. In place of that if we want to use the icon, we can keep the folder icon there so that we can come on to its click. Let’s say if we want to upload any file on cloud, we can keep the cloud icon, if you want to keep any button, we can keep a bugger icon in which there are three horizontal lines. Okay, guys! In this way, we can introduce multiple types of icons. And from that, as per our requirement we can add the icons in our website. Keeping the icon also means that with the help of icons our code becomes short. We don't have to add a lot of content on our website but we can shortly and easily explain it with the help of an icon. Next here is, using the icon library is the easiest way to add icons to our HTML page. It is possible to format the library icons by using CSS, means once we have added our icons to our website after that we can format the CSS icon library with the help of CSS. Whichever type of icon we want to show we can show it there. We can customise the icons as per our need. Like there are few properties given in it like colour, shadow and size. The colour shadow and size we want to keep of the icon, we can do it through CSS. Normally the open-source icons that are available to us in that we have Bootstrap icons, Font Awesome icon and Google icons, these three are available with us. In Bootstrap, it is so that if you're using Bootstrap, you have to use Bootstrap 3.3.7. Because after the 4^th version of Bootstrap they have omitted the icons. They are not available there.okay!  If you want to include any icons from Bootstrap to your website you will have to mandatorily use Bootstrap 3.3.7 icons. Apart from Bootstrap, Font Awesome and Google icons are still available. You can use them as per your need, you don't have to install these icons in our system or in the program folder. We can add a simple link in our website and use this library. Got it?  The first icon that we have with us is the Font Awesome icon. First of all, I will go on to the Font Awesome website. Font Awesome. So, this is our font awesome website, on this website you can see whichever icon you want to use, you can take it from here. Here are a few dummy examples given. So here, if I go to icons here. So, you can see here that multiple icons have been given. Here a few categories have also been given. You can find out from here.or You can write the icon’s name also and use it. Whichever icons were given here if you want to use them. There are few pro and free icons. As per your requirement you can use any from the two. So, add these icons in your website you have to only add font awesome links and these icons are available with us. So, this was Font Awesome, in the same way, we have Google icons available with us. Google fonts are written over there. I can Google Fonts. So, these are our Google icons. If there is any icon which is not available in Font Awesome, you can use it from fonts.google.com as well. There are a lot of icons available here as well, save, bootstrap icon. So, here if you will go to Bootstrap. Here icons library is available, from this also you can take any icon and keep it on your website as per your requirement. So, these are our three icons, first was Font Awesome. Second was Google and third was Bootstrap icons. okay! great! So now we will come again to our site. First is the Font Awesome. If you want to add Font Awesome icons or you want to add any icons of Google, Bootstrap or Font Awesome. To all these 3 what we will do is, the head section which is there, in that we have to add a specified link, for Font Awesome here the link which is given, this link we will add in our website, as soon as we add it we can use the icons in our website.  For example, if I go into Sublime Text, Sublime Text, examples font awesome icons, font awesome. Okay, so this was our font awesome. Now, I will run this in Google Chrome. Okay. Now what we have to do in this is like it is written in the slide. The link that has been given to us, we have to add this link. What will we do?  So, for that the head tag that is there, in that we will add this link, this link I have added, after adding this link we will add whichever is our icon. So, let's say first of all, I will take h3. Font Awesome icons. Okay, save, icons. Okay, save. So here are the Font Awesome icons. We will add a little bit of style in the head. Body, background colour for example. I will take light green, text align, centre, okay. In this way, we'll add our different icons which are there. First of all, let's say we have taken one example here. Whenever we add font awesome icons, there is a syntax in which way it is written. So, we write it in this way. I class = fa, fa represents Font Awesome. Then comes fa cloud, so let’s say I want to add a cloud icon. I will write it in this way.  fa Fa clouds, so I will write here, i, in i we have written class fa, fa, cloud. So, you can see that as soon as I reloaded it. I'm getting a cloud icon here.okay! So, this is my cloud icon, if I want, I can make it a little bigger as well. I have fa class available here, let's say by writing .fa, if we want to customise this class. So, let’s say the colour that is there, if I make it blue. Then I will take the font size, 40 pixels. And in between the 2 icons I even want some margin. So, I will give it 10 pixels. So, here I am getting a blue colour cloud. In the same way we have others as well, file, heart, bars and cars. So, we will add those as well. Like file, heart, bars, then we have cars.(pause)We will save it. So, you can see that we are getting different icons here. For file, file like icon, when we wrote heart, so heart icon, bars icon and car icon. All these icons that are there are Font Awesome icons. As soon as we add the Font Awesome library, we get these kinds of items available. Apart from Font Awesome, we have another one which has Bootstrap icons, if you want to add Bootstrap icons Like we had done for Font Awesome. In the same way we have to link the library for Bootstrap.okay guys! What we'll do for that is, we will generate a new program here; example, Bootstrap Icons, we will save it, bootstrap icons or bootstrap.html. In this we will do as we did in our last segment, we will take only the h3 tag from here, we will run this program. okay! So, this is our bootstrap item written program and whatever was related to our body that we will paste here.(pause) And the fa written, we will paste it here. So, these are Bootstrap icons. Now we have to include bootstrap icons in this. Like it is mentioned here, we have to link our libraries the URL so, we will paste this URL here. For that what we have to do is, we will take bootstraps URL. After titled, this comes Bootstrap URL, save. Now, in this URL which is there in it, as I said that we cannot use Bootstrap 4, so mandatorily we have to use 3.3.7. okay! So, as you can see here, in our CDN URL also 3.3.7 is mentioned. So, like in Font Awesome fa was our class name. Similarly, in Bootstrap, glyphicon is our class name as bootstrap icons are also called glyphicon. Like it is written here, we will write in bootstrap. I; in I, class GLYPHICON. This spelling you have to write carefully, glyphicon, after writing glyphicon. Glyphicon, if you want to add cloud, like it is written here cloud. So, we will first of all save here, reload. as soon as I add the bootstrap library, my bootstrap font has also changed. So, what happens here is the bootstrap icons, the bootstrap related CSS that has become applicable on the web page. So, if I go on to the Font Awesome page. Our fonts look different. They're Arial type. But here you can see that our fonts have become Roboto. Roboto is our bootstraps default font. So here my fonts have also changed. So, this is my cloud. So, you can see that in both the clouds (repeat) there is a slight difference. I will write glyphicon and uncomment this portion. Okay. So, you can see that there is a difference in both the clouds because this is a font awesome cloud and this is a Bootstrap cloud. So, there is a slight difference in both the icons. Okay guys, got it? Then comes the file, heart, user, thumbs up. What we will do is from here, the same we will place here and  we will replace FA  with glyphicon. So here comes our file, heart, user, thumbs up, there is a hyphen between thumps and up. Guys, you have to make sure here in case we pass the wrong spelling or write the wrong way. So, the thump will not be visible. Temporary, I will remove the space between thumbs and up and you can see that after the user I'm not able to see the icon, as soon as I will write the hyphen again, reload it. I'm getting my thumbs-up. Means if we have written any spelling or key word incorrectly or the name related to the icon, if we have not properly passed that item related keyword, that icon will not be visible to us. So, make sure that whenever you use any icon, Font Awesome, Bootstrap, or Google, whichever name you are passing there, the same name you will pass here. So, you can see your cloud then file. Then you can see there is a slight difference in the file. Then heart, there is a slight difference in it. Then user and then thumps-up. So, these are our Bootstrap icons. Clear guys!  So, you have seen how we have added bootstrap icons in our file. So, this was our Bootstrap icon. Then we will go into the slide. Okay guys now, Next comes, like we have added Font Awesome and Bootstrap icons, in the same way we will add Google icons as well.(pause) Example, Google icons, Google.html. Okay. Here, we have to place the Google icons URL. So, here comes our Google icons URL. I will copy the same style over here, initially I will comment on it here and, in the body, as it was written h3, here it was written Bootstrap icon. Here, it will come; Google icons, save, the name is Google, run it. So, our program has Google icons. okay! Now, we will go to our slide. In this slide in Google icons, you can see I, after class, material icons are written, so in our program, we will take i portion. But here there are no glyphicons, material icons are written there. These are the material icons. Then whatever is our icon, we have to write it after I tag.  As you can see, I class=material icon, then there is cloud written here, whereas how was in Font Awesome and Bootstrap, our icon is generated from the class, we have passed it in our class name itself and we have not mentioned anything here. So, in Google there are material icons. After that, cloud, save and reload. Now, we can see that the cloud is getting generated over here.clear guys! But the writing technique and syntax is different compared to Font Awesome and Bootstrap. So, the class which is common is this one the material icons. I will uncomment this and then we'll add material icons here. Save, reload. So, my cloud has come here. Now, if I want to show the other items apart from these. So, after cloud there is attachment, computer, favourite and traffic; attachment, computer, favourite, okay! there is no U in it. And there is traffic, save, reload. So here, we are getting everything, cloud, attachment, computer and our favourite. Heart, which is there in Font Awesome and Bootstraps, instead of that we're getting heart. So, on writing our favourite we are getting heart and here there is a traffic icon. So, in total there are five icons which are visible over here. So, these are our Google icons. By default, on writing material icons these are getting visible to us. Got it, guys! So, these are the three icons that we have seen today. First one was Font Awesome icons, second was our Bootstrap icons. And third is our Google icons. The difference in all three is that the three icons are different in their own way. If you see the clouds of each one of them. Every cloud we would see in a different way and different design. If you see the files of each one of them, they are different.  But the difference in Bootstrap icons is that they are made with Roboto font. Whenever you will add a bootstrap URL in your website. The font of your website would entirely be Roboto. If you have to use any other font apart from Roboto. You will have to pass it manually over there. Else the entire website’s font would be Roboto. clear,guys! So, this was our today's segment on icons, in which there was Font Awesome, Bootstrap and Google we have used. How to add the three and how we can work with all three and what is the difference in all three. All that we have covered in today's segment. How we can add all three and how we can work with all three. What is the difference in all three, that we have covered in today's segment, So guys, whenever you work on a website or in web development, you will have to take the decision as per the requirement, which are the font icons that you have to use. In today’s segment if there is anything that you have not understood. You have any difficulty or doubts in it, you can tell us on forums.learnver.com. We would try to revert to all your questions over there. Our next topic is line height, padding and margin. Thank you guys.