CSS Icons - Detailed Overview

Introduction to CSS Icons

CSS Icons are used to add visual elements to web pages. You can use icon fonts, SVGs, or image files as icons. This page covers the basics of using icon fonts and CSS to style icons.

Using Icon Fonts

Icon fonts are a popular way to add icons to your site. Font Awesome and Material Icons are two common icon font libraries. Here's an example using Font Awesome:

<i class="fa fa-camera"></i>

Camera Icon (Font Awesome)

Make sure to include the Font Awesome stylesheet in your <head> section:

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

Styling Icon Fonts

You can style icon fonts using CSS properties like font-size, color, and text-shadow. For example:

i {
    font-size: 36px;
    color: #333;
    text-shadow: 1px 1px 2px #aaa;
}

Styled Camera Icon

Using SVG Icons

SVGs are scalable vector graphics that can be used as icons. You can embed SVGs directly into your HTML or reference them as an image source. Here’s an example of embedding an SVG:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.27L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#000"/>
    </svg>

Star Icon (SVG)

Styling SVG Icons

SVG icons can be styled using CSS properties such as width, height, and fill. For example:

svg {
    width: 48px;
    height: 48px;
    fill: #007BFF;
}

Styled Star Icon

Using Image Icons

You can also use image files as icons. Here’s an example using a PNG image:

<img src="icon.png" alt="Icon" style="width: 24px; height: 24px;">

Icon Image Icon

Styling Image Icons

Image icons can be styled using CSS properties such as width, height, and border. For example:

img {
    width: 32px;
    height: 32px;
    border: 2px solid #ddd;
    border-radius: 4px;
}

Icon Styled Image Icon