learn2kode.in

Menu

CSS Tutorial

Menu

CSS Icons

CSS icons are small visual elements used to improve the user interface. Instead of using image files, most modern websites use icon libraries such as FontAwesome, Bootstrap Icons, Material Icons, etc. These icons are lightweight, scalable, and easy to style using CSS.

Why Use Icon Libraries?

  • Scalable: Icons remain clear at any size because they are vectors.
  • Customizable: You can change color, size, shadows, and effects using CSS.
  • Fast loading: No need for multiple image files.
  • Consistent design across the entire website.

Using FontAwesome Icons

FontAwesome is the most popular icon library. You can include it by adding a CDN link in your HTML <head> section.

Step 1: Add FontAwesome CDN

Copy Text 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

Step 2: Insert an Icon

Copy Text 
<i class="fa-solid fa-home"></i>

Example

Copy Text 
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>

Styling Icons with CSS

Icons behave like text, so you can style them easily.

Change Size

Copy Text 
.icon-large {
  font-size: 40px;
}
Copy Text 
<i class="fa-solid fa-star icon-large"></i>

Change Color

Copy Text 
.icon-red {
  color: red;
}
Copy Text 
<i class="fa-solid fa-heart icon-red"></i>

Add Hover Effect

Copy Text 
.icon-hover:hover {
  color: orange;
  transform: scale(1.2);
}
Copy Text 
<i class="fa-solid fa-thumbs-up icon-hover"></i>

Other Popular Icon Libraries

1. Bootstrap Icons

Add CDN:

Copy Text 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

Use icon:

Copy Text 
<i class="bi bi-alarm"></i>

2. Google Material Icons

Add CDN:

Copy Text 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Use icon:

Copy Text 
<span class="material-icons">search</span>

When to Use Icons?

Use CSS icons for:

  • Navigation menus
  • Buttons
  • Social media links
  • Feature lists
  • Contact information
  • Dashboard UI elements

Icons help users understand actions quickly and make your website visually attractive.

CSS Animations & Transitions