@codeswithpankaj

CSS Icons

CSS Icons Tutorial - codeswithpankaj.com

CSS icons are used to enhance the visual aspect of a website by providing graphical representations of actions or features. They can be added using icon libraries, such as Font Awesome or Material Icons, or by using custom icon fonts or SVGs.

1. Using Icon Libraries

Icon libraries provide a wide range of icons that can be easily integrated into your web project. Here, we'll demonstrate how to use Font Awesome.

Example:

  1. Include the Font Awesome library in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Icons - codeswithpankaj.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <i class="fas fa-home"></i> Home - codeswithpankaj
</body>
</html>

In this example, the Font Awesome library is included, and the home icon is added using the <i> tag with the class fas fa-home.

2. Custom Icon Fonts

You can create custom icon fonts using tools like IcoMoon. Once you have your custom font, you can include it in your project.

Example:

  1. Include the custom font in your CSS:

@font-face {
    font-family: 'CustomIcons';
    src: url('custom-icons.woff2') format('woff2');
}

.icon {
    font-family: 'CustomIcons';
}

  1. Use the custom icons in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Icon Fonts - codeswithpankaj.com</title>
    <style>
        @font-face {
            font-family: 'CustomIcons';
            src: url('custom-icons.woff2') format('woff2');
        }
        .icon {
            font-family: 'CustomIcons';
        }
        .icon-home:before {
            content: '\e900';
        }
    </style>
</head>
<body>
    <span class="icon icon-home"></span> Custom Home Icon - codeswithpankaj
</body>
</html>

In this example, a custom icon font is included, and the home icon is used with the icon-home class.

3. Using SVG Icons

SVG (Scalable Vector Graphics) icons provide high-quality, scalable graphics that can be easily styled with CSS.

Example:

  1. Include the SVG icon directly in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Icons - codeswithpankaj.com</title>
    <style>
        .icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }
    </style>
</head>
<body>
    <svg class="icon" viewBox="0 0 24 24">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM11 17h-2v-6h2v6zm0-8h-2V7h2v2z"/>
    </svg>
    Info Icon - codeswithpankaj
</body>
</html>

In this example, an SVG icon is included directly in the HTML, and it is styled using CSS.

4. Styling Icons

Icons can be styled using CSS properties such as color, size, and hover effects.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling Icons - codeswithpankaj.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .icon {
            font-size: 24px;
            color: blue;
            transition: color 0.3s;
        }
        .icon:hover {
            color: red;
        }
    </style>
</head>
<body>
    <i class="fas fa-thumbs-up icon"></i> Like - codeswithpankaj
</body>
</html>

In this example, the thumbs-up icon from Font Awesome is styled with a blue color and changes to red when hovered.

This tutorial covers various methods to use and style CSS icons. For more tutorials and examples, visit codeswithpankaj.com.

PreviousCSS FontsNextCSS Links

Last updated