CSS icon is an additional feature of CSS, which allows us to use a wide variety of icons on the HTML webpage. These icons make our webpage more attractive and provide additional engagement to the content of the webpage. So, how can we use these icons? Well, the simple way of using these icons is to use directly from the icon library. The icon library is the place where a wide variety of icons are present, for example, fontawesome, google icons, bootstrap icons, etc. We can add icons straight from these icon libraries, which we will discuss in this post. If you have not read about CSS colors, click here to read it and learn how to use various colors on your webpage.
As said above, there are various ways and platforms which offer free icons to use, let’s start them one by one. All these icons present in the library of icons are scalable vectors, which means we can adjust their size, color, shadow, etc.
Fontawesome Icons in CSS
Fontawesome icons provide a huge variety of icons to use on your webpage. This platform is widely used for adding icons in their webpages. You have a variety of options for icons, according to your needs you can use them. But, to use them you have to first sign in to their website. After signing in, a random code generates that you have to add to your HTML coding in the header section. Let’s see step by step how to use fonts awesome icon.
- Go to https://fontawesome.com
- Register to the website. Check your email and verify your account.
- Copy this kit code to your HTML document in the <head> section.
Don’t forget to get your code from font awesome website and place it in <head> section. For more icons refer here.
You do not need to install or download anything to display these icons on your webpage. So, don’t worry and experiment with these icons.
How to Use Fontawesome Icons in Button?
We can use fontawesome icons in buttons also in the same manner as we use the icons. Let’s see this with the help of an example:
Google Icons in CSS
Google is also the icon library that offers various icons to use in the HTML webpage. All these icons are free to use. We just need to place a code in the header section of the website to implement the icons. Let’s see how to do this.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Paste this code in the <head> section of your HTML coding page.
Similar to the font awesome icons, google icons are also scalable vectors.
To use more google icons, please click here.
Bootstrap Icons in CSS
Bootstrap icons are used in the same way as google icons are used. In this case, we also need to paste an HTML code in our coding to get icons from the bootstrap icons library. Bootstrap icons also offer a large number of icons to be used for free. It is also no need to download or install anything to use bootstrap icons. Let’s see how we can use bootstrap icons.
For more bootstrap icons, click here.
So, that was all about using icons in CSS. Practice them and use them as much as you can.