? Icons in CSS

CSS itself doesn’t create icons but helps style and display icons in your web projects. Here are the common ways to use icons with CSS:

1. Using Icon Fonts (like Font Awesome)

Icon fonts are fonts where characters are icons.

How to use:

1. Include the icon font library (via CDN or locally):

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

2. Add an icon using a special <i> or <span> tag with classes:

<i class="fas fa-home"></i>  <!-- Home icon -->

3. Style with CSS as normal text:

i {  color: blue;  font-size: 24px;}

2. Using SVG Icons

SVG (Scalable Vector Graphics) are vector images that scale perfectly.

Ways to use SVG:

• Inline SVG in HTML.

• Use <img> tag with SVG file.

• Use CSS background-image with an SVG file.

Example (inline SVG):

<svg width="24" height="24" fill="red" xmlns="http://www.w3.org/2000/svg">  <circle cx="12" cy="12" r="10"/></svg>

Example (CSS background):

.icon {  width: 32px;  height: 32px;  background-image: url('icon.svg');  background-size: contain;  background-repeat: no-repeat;}

3. Using CSS content with Icon Fonts or Unicode Characters

You can insert icons in ::before or ::after pseudo-elements.

Example with Font Awesome:

button::before {  content: "\f007"; /* Unicode for user icon */  font-family: "Font Awesome 5 Free";   font-weight: 900;  margin-right: 8px;}

Example with Unicode emoji or symbol:

h1::before {  content: "? ";}

4. Using CSS Shapes or Simple Icons

You can also create simple shapes or icons purely with CSS using borders, background, and transforms.

Example (simple arrow):

.arrow {  width: 0;   height: 0;   border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-bottom: 20px solid black;}

Summary

• Use icon fonts for easy scalable icons with CSS styling.

• Use SVG for high-quality, scalable graphics.

• Insert icons via content or background images.

• Create simple shapes with pure CSS.

Want me to help you add icons to a webpage with examples?