CSS - Icons

The CSS icons are used to add graphical representations, symbols, or small images to web elements. They serve several purposes in web development, such as:

  • Enhanced user experience: Provides visual cues and context to various elements on a webpage, like instead of adding the text save, delete, etc. you may add an icon to represent them.

  • Reduced load time: CSS icons are often lightweight compared to traditional image icons, which means they can load quickly, reducing the overall page load time.

  • Scalability: CSS icons can be easily scaled up or down without loss of quality. It is important for responsive web designing.

  • Customization: CSS icons can be customized by changing their size, color, and other visual properties using CSS rules. This flexibility allows you to match the icons to your website's overall design and branding.

  • Accessibility: CSS icons can be styled to meet accessibility standards, such as providing alternative text for screen readers.

  • Reduced HTTP Requests: Using CSS icons can reduce the number of HTTP requests made by a webpage since they are often part of the stylesheet.

To create CSS icons, developers often use techniques like CSS pseudo-elements (::before and ::after), icon fonts, or inline SVGs. Each approach has its advantages and trade-offs, and the choice depends on the specific needs of the project.

Popular CSS icon libraries like Font Awesome, Material Icons, or custom icon sets are also widely used to simplify the process of adding icons to web applications.

Adding Icons

Some of the common methods though which we can add CSS icons are as follows:

  • Using CSS pseudo-elements (::before and ::after): Involves using the ::before and ::after pseudo-elements to insert content before or after an HTML element and then styling that content to display an icon.

  • Icon fonts: Icon fonts are custom fonts that contain icons as glyphs. You can use these fonts to display icons by setting the appropriate font-family and specifying the icon's Unicode character.

  • Inline SVGs: Involves embedding SVG (Scalable Vector Graphics) directly into your HTML code. You can create or obtain SVG icons and insert them as inline elements.

  • CSS background images: You can use CSS background images to display icons by setting the background-image property on an element.

  • CSS Libraries and Frameworks: Many CSS libraries and frameworks, like Font Awesome, Material Icons, and Bootstrap Icons, provide pre-designed sets of icons that you can easily include in your projects. They often come with ready-to-use classes or utility classes.

  • Custom CSS: You can create your own custom CSS for icons by designing and styling them using CSS properties like width, height, border, border-radius, and more. This approach gives you full control over the design of your icons.

Let us see example for each.

CSS Icons - Using pseudo-elements

Pseudo-elements like ::before and ::after can be used to insert an icon before or after an element as demonstrated in the following example:

<html>
<head>
<style>
   .flavour-list {
      list-style: none;
   }
   .flavour-list li {
      font-size: 2em;
   }
   .flavour-list li::before {
      content: url(images/smiley.png);
      margin-right: 15px;
      font-size: 20px;
   }
   .flavour-list li::after {
      content: url(images/smiley.png);
      margin-left: 15px;
   }
</style>
</head>
<body>
   <div>
      <ul class="flavour-list">
         <li>Butterscotch</li>
         <li>Chocolate</li>
         <li>Coconut</li>
         <li>Cookie n Cream</li>
         <li>Roasted Almonds</li>
         <li>Vanilla</li>
      </ul>
   </div>
</body>
</html>

CSS Icons - Using Font Awesome

In order to add the basic icons of Font Awesome, you need to add the following link under the <head> section of your html:

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

To add the Font Awesome icons, add prefix fa along with the icon's name. For example: fa-car, fa-address-book.

Following example demonstrates using Font Awesome icons:

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
   <i class="fa fa-envelope-open fa-6" style="font-size:65px;" aria-hidden="true"></i>
   <i class="fa fa-heart fa-5" style="font-size:50px;" aria-hidden="true"></i>
   <i class="fa fa-file fa-4" style="font-size:40px;" aria-hidden="true"></i>
   <i class="fa fa-cloud fa-3" style="font-size:30px;" aria-hidden="true"></i>
   <i class="fa fa-address-book fa-2" style="font-size:20px;" aria-hidden="true"></i>
   <i class="fa fa-car fa-1" style="font-size:15px;" aria-hidden="true"></i>
</body>
</html>

CSS Icons - Using Background Images

The background image can also be used an an icon.

Following example demonstrates using background image as an icon:

<html>
<head>
<style>
   .iconimg {
      width: 50px;
      height: 50px;
      background-image: url('images/logo.png');
      background-size: cover;
   }
</style>
</head>
<body>
   <div class="iconimg"></div>
</body>
</html>

CSS Icons - Using Bootstrap Icons

The icons provided by Bootstrap can be used as icons. You just need to add the following link in the <head> section of your html code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Note: There is no need to install or download Bootstrap icons.

Following example demonstrates using Bootstrap Icons:

<html>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
   <div style="padding: 10px">
   <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
      <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-balloon-fill" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M8.48 10.901C11.211 10.227 13 7.837 13 5A5 5 0 0 0 3 5c0 2.837 1.789 5.227 4.52 5.901l-.244.487a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2.376 2.376 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.244-.487ZM4.352 3.356a4.004 4.004 0 0 1 3.15-2.325C7.774.997 8 1.224 8 1.5c0 .276-.226.496-.498.542-.95.162-1.749.78-2.173 1.617a.595.595 0 0 1-.52.341c-.346 0-.599-.329-.457-.644Z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
      <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
      </svg>
   </div>
</body>
</html>

CSS Icons - Using Google Icons/Fonts

The icons provided by Goole can also be used as icons. You just need to add the following link in the <head> section of your html code:

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

Note: There is no need to install or download Google icons.

Following example demonstrates using Google Icons:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
   <i class="material-icons" style="font-size:40px;">pets</i>
   <i class="material-icons" style="font-size:40px;">settings</i>
   <i class="material-icons" style="font-size:40px;">attachment</i>
   <i class="material-icons" style="font-size:40px;">person</i>
   <i class="material-icons" style="font-size:40px;">recycling</i>
</body>
</html>
Advertisements