CSS: Icons

In CSS, you can use several techniques to display icons on your webpage. These icons can be created using CSS itself (such as using Unicode characters or CSS shapes), or you can use icon fonts, SVG icons, or external libraries like Font Awesome or Material Icons. Here's an overview of how you can work with icons in CSS:

• Unicode Icons: Unicode characters can be used to display icons directly in HTML or CSS. For example, the Unicode character for a star (★) can be used as an icon.

.star-icon::before {
    content: "\2605"; /* Unicode for star character */
    font-size: 20px;
}

In html

<p>&#9733; Star Icon</p>

• Icon Fonts: Icon fonts are fonts that contain vector icons as glyphs. You can use them by including the font file in your project and then assigning classes to elements.

.icon-star::before {
    content: '\e001'; /* Unicode for the star icon in the font */
    font-family: 'IconFontFamily';
    font-size: 20px;
}

In html

<link rel="stylesheet" href="path/to/icon-font.css">
<i class="icon-star"></i> Star Icon

• SVG Icons: SVG (Scalable Vector Graphics) icons are vector-based and can be directly embedded in HTML or used as background images in CSS.

.svg-icon {
    fill: currentColor; /* Use current text color for SVG fill */
    width: 24px;
    height: 24px;
}

In html

<svg class="svg-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2l4 8H8l4 8-4-8H4l4-8z"/>
</svg>

• External Icon Libraries: Libraries like Font Awesome or Material Icons provide a wide range of icons that you can easily use in your project by including their CSS file.

.fa-star {
    color: gold; /* Customize icon color */
    font-size: 24px;
}

In html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i class="fas fa-star"></i> Star Icon

• CSS Shapes: You can use CSS properties like border-radius, box-shadow, and background to create simple shapes and icons.

.circle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff; /* Blue circle */
}

These are some of the common techniques for working with icons in CSS. Depending on your requirements and preferences, you can choose the method that best suits your needs for displaying icons on your webpage.