CSS Icons Tutorial, Font Awesome, Bootstrap & Google Icons with Examples

CSS Icons

CSS Icons are vector-based graphical symbols that can be styled with CSS. They are commonly used in modern web design to enhance visual appeal or represent actions like download, upload, delete, or navigation all without the need for image files.

Why Use CSS Icons ?

Scalable: Icons resize without losing quality.

Lightweight: No additional image files required.

Customizable: Easily change color, size, and effects using CSS.

Improves Page Speed: Reduces load time compared to image-based icons.

Popular CSS Icon Libraries

CSS icon libraries provide ready-to-use icon sets that are easy to embed in web pages. Here are some of the most popular ones:

1. Font Awesome Icons

Font Awesome offers a vast collection of scalable vector icons that can be customized with CSS. It is available in both free and pro (paid) versions.

CDN Link:

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

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            text-align: center;
            background-color: lightblue;
        }
        .fa {
            color: red;
            font-size: 50px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Font Awesome Icons</h1>
    <i class="fa fa-cloud"></i>
    <i class="fa fa-file"></i>
    <i class="fa fa-heart"></i>
    <i class="fa fa-bars"></i>
    <i class="fa fa-car"></i>
</body>
</html>

Output:

2. Bootstrap Icons (Glyphicons)

Bootstrap (v3) includes Glyphicons a set of built-in icon fonts.

CDN Link:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Icons</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        body {
            text-align: center;
            background-color: lightblue;
        }
        .glyphicon {
            color: red;
            font-size: 50px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Bootstrap Icons</h1>
    <i class="glyphicon glyphicon-cloud"></i>
    <i class="glyphicon glyphicon-file"></i>
    <i class="glyphicon glyphicon-heart"></i>
    <i class="glyphicon glyphicon-user"></i>
    <i class="glyphicon glyphicon-thumbs-up"></i>
    <i class="glyphicon glyphicon-remove"></i>
    <i class="glyphicon glyphicon-envelope"></i>
</body>
</html>

Output:

3. Google Material Icons

Google offers Material Icons - a modern and flexible icon set designed with Google's Material Design principles.

CDN Link:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Google Material Icons</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        body {
            text-align: center;
            background-color: lightblue;
        }
        .material-icons {
            color: red;
            font-size: 50px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Google Material Icons</h1>
    <i class="material-icons">cloud</i>
    <i class="material-icons">attachment</i>
    <i class="material-icons">computer</i>
    <i class="material-icons">favorite</i>
    <i class="material-icons">traffic</i>
</body>
</html>

Output:

Key Point

You do not need to download these icon sets just use the provided CDN links.

All icons are scalable SVG fonts, meaning they would not pixelate on zoom.

You can easily change their size, color, spacing, and more using CSS.