CSS Icon

Prev Next

CSS icons are a great way to add graphical elements to your HTML page without needing image files. You can use various icon libraries and customize these icons using CSS. Here’s a guide on how to use CSS icons with examples:

Popular Icon Libraries

1. Font Awesome Icons: A popular icon library with a large selection of icons.

2. Google IconS: Also known as Material Icons, provided by Google.

3. Bootstrap Icons: Icons provided by the Bootstrap framework.

Method 1: Using Font Awesome Icons

Font Awesome provides a large collection of icons that you can easily integrate into your web page. To use Font Awesome icons, follow these steps:

STEP 1. Include Font Awesome CDN

Add the following link to the <head> section of your HTML document. This imports the Font Awesome stylesheet, which gives you access to their icons.

STEP 2. Add Icons to Your HTML

To display an icon, use the <i> tag with the appropriate classes. The fa class is required, and you need to specify the icon you want to use by adding another class, such as fa-cloud for a cloud icon

Syntex:

Example:

<!DOCTYPE html>
<html>
<head>

  <title>Font Awesome Icons Example</title>

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .icon {
      font-size: 24px; 
      color: #3498db; 
      margin: 10px; 
    }
  </style>

</head>

<body>

  <h3>Font Awesome Icons Example</h3>

  
  <i class="fa fa-cloud icon"></i> 
  <i class="fa fa-heart icon"></i> 
  <i class="fa fa-twitter icon"></i> 

</body>
</html>

Output:

Font Awesome Icons Example

Method 2: Using Google Icons

Google Material Icons provide a set of free and open-source icons that you can easily integrate into your web page. Here's how you can use them:

STEP 1. Include Google Material Icons CDN

Add the following link to the <head> section of your HTML document. This imports the Google Material Icons stylesheet

Step 2. Add Icons to Your HTML

To display an icon, use the <i> tag with the class material-icons and specify the icon name within the tag.

Syntex:

Example:

<!DOCTYPE html>
<html>
<head>

  <title>Google Icons Example</title>

  
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    .icon {
      font-size: 24px; 
      color: #4CAF50; 
      margin: 10px; 
    }
  </style>

</head>

<body>

  <h2>Google Material Icons Example</h2>

  
  <i class="material-icons icon">cloud</i> 
  <i class="material-icons icon">favorite</i> 
  <i class="material-icons icon">twitter</i> 

</body>
</html>

Output:

Google Material Icons Example

Method 3: Using Bootstrap Icons with Inline CSS

To use Bootstrap Icons in your HTML document, you'll need to include the Bootstrap Icons CDN link in the <head> section. After that, you can add icons to your HTML and style them with inline CSS.

Step 1. Include Bootstrap Icons CDN

Add the following link to the <head> section of your HTML document. This imports the Bootstrap Icons stylesheet.

Step 2: Add Icons with Inline CSS

Use the <i> tag (or <span>, depending on your preference) with the appropriate Bootstrap Icons class and apply inline CSS directly within the style attribute.

Example:

<!DOCTYPE html>
<html>
<head>

  <title>Bootstrap Icons Inline CSS Example</title>

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css">
</head>

<body>

  <h2>Bootstrap Icons Example</h2>

  
  <i class="bi bi-cloud" style="font-size: 24px; color: #4CAF50; margin: 10px;"></i>
  <i class="bi bi-heart" style="font-size: 30px; color: #F44336; margin: 10px;"></i>
  <i class="bi bi-twitter" style="font-size: 20px; color: #2196F3; margin: 10px;"></i>

</body>
</html>

Output:

Bootstrap Icons Example

Prev Next