CSS Icons

CSS icons can be incorporated into your web design in several ways, such as using icon fonts, SVGs (Scalable Vector Graphics), or CSS-generated content. Here are some popular methods:

1. Using Icon Fonts

Icon fonts like Font Awesome and Material Icons are popular because they are easy to use and scale well.

Using Font Awesome:

1. Include Font Awesome in your HTML:


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

2. Use the icons in your HTML:


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

3. Style the icons with CSS:


.fa-home {
    color: blue;
    font-size: 24px;
}

.fa-user {
    color: red;
    font-size: 22px;
}

2. Using SVGs

SVGs are a great choice because they are vector-based, meaning they are resolution-independent and can be scaled to any size without losing quality.

1. Include SVG directly in your HTML:


<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="#000"/>
</svg>

2. Style SVG with CSS:


svg {
    width: 50px;
    height: 50px;
    fill: green;
}

Using SVG as an Image:

1. Include SVG file in your HTML:


<img src="icon.svg" alt="Icon" class="icon">

2. Style the image with CSS:


.icon {
    width: 50px;
    height: 50px;
}

3. CSS-Generated Content

You can use the : : before or : : after pseudo-elements to insert icons, often combined with icon fonts.

Example with Font Awesome:

1. Include Font Awesome in your HTML:


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

2. Use CSS to insert the icon:


.icon-home::before {
    content: "\f015"; /* Unicode for home icon in Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: blue;
    margin-right: 10px;
}

3. Use the class in your HTML:


<div class="icon-home">Home</div>

Home

4. Using CSS Libraries

There are several CSS libraries available that provide a wide range of icons, such as Bootstrap Icons.

Using Bootstrap Icons:

1. Include Bootstrap Icons in your HTML:


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

2. Use the icons in your HTML:


<i class="bi bi-house"></i> <!-- Home icon -->
<i class="bi bi-person"></i> <!-- Person icon -->

3. Style the icons with CSS:


.bi-house {
    color: green;
    font-size: 34px;
}

.bi-person {
    color: orange;
    font-size: 28px;
}

CSS Icons – Interview Questions

Q 1: How are icons added in CSS?

Ans: Using icon fonts or libraries.

Q 2: Popular icon libraries?

Ans: Font Awesome, Bootstrap Icons.

Q 3: Can icons be styled with CSS?

Ans: Yes, color, size, shadow.

Q 4: Are CSS icons responsive?

Ans: Yes, when using font or SVG icons.

Q 5: Advantage of icon fonts?

Ans: Scalable and lightweight.