There are several ways to use icons in CSS:

  1. Using an icon font: An icon font is a font that contains symbols or glyphs instead of letters and numbers. Icon fonts can be easily customized using CSS, and they are widely supported across modern browsers. To use an icon font, you need to include the font file in your HTML document using the @font-face rule, and then use the corresponding character code to display the icon.
@font-face {
  font-family: "MyIconFont";
  src: url("my-icon-font.ttf") format("truetype");
}

.icon {
  font-family: "MyIconFont";
  font-size: 24px;
  content: "\e900";
}

In this example, the @font-face rule defines a font named "MyIconFont", and the .icon class uses the font to display the icon with the character code "\e900".

  1. Using an image file: You can use an image file as an icon by setting the background-image property of an element. To use an image file as an icon, you need to include the image file in your HTML document using the <img> element, or link to the image file using the background-image property.
.icon {
background-image: url("my-icon.png");
width: 24px;
height: 24px;
}

In this example, the .icon class uses the image file "my-icon.png" as the background image, and sets the width and height of the element to 24 pixels.

  1. Using the ::before or ::after pseudo-element: The ::before and ::after pseudo-elements can be used to insert content before or after the content of an element. You can use the ::before or ::after pseudo-element to insert an icon by setting the content property with an image file or a character code from an icon font.
.icon::before {
content: url("my-icon.png");
width: 24px;
height: 24px;
}

n this example, the .icon::before pseudo-element uses the image file "my-icon.png" as the content.