CSS
CSS Icons
CSS icons are scalable vectors, customizable, and used in web design. They are often added to the HTML page using icon libraries such as Font Awesome, Bootstrap Icons, or Google Icons. For styling these icons, CSS properties such as color, size, and effects are used to make the webpage visually appealing.
How to Add CSS Icons?
If you are a developer and learning to add CSS icons, follow the steps:
- Select an icon library to choose icons for your web page.
- Now go to any inline HTML element and insert the name of the icon class of your choice.
Font Awesome Icons
It is one of the most commonly used icon libraries. Here’s how you can add an icon from Font Awesome.
- Go to fontawesome.com and sign in to your account.
- You will get a code after signing in. Add the code in the <head> section of your HTML page.
<script
src=”https://kit.fontawesome.com/yourcode.js”
crossorigin=”anonymous”>
</script>
Bootstrap Icons
Like Font Awesome, Bootstrap Icons are also a top choice among developers for creating interactive websites. Additionally, the icon code is placed inside the <head> section of the HTML page, similar to Font Awesome.
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css”>
Google Icons
This icon library is also greatly used by developers. Adding icons using Google Icons is simple. Copy the line mentioned below and paste it into the <head> section of the HTML page.
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css”>
