CSS – Icons


CSS – Icons


”;


Previous

Next

CSS icons are used to add graphical representations, symbols, or small images to web elements. They serve several purposes in web development, such as:


Table of Contents



 


Importance of Icon

  • Enhanced user experience: Provides visual cues and context to various elements on a webpage, like instead of adding the text save, delete, etc. you may add an icon to represent them.

  • Reduced load time: CSS icons are often lightweight compared to traditional image icons, which means they can load quickly, reducing the overall page load time.

  • Scalability: CSS icons can be easily scaled up or down without loss of quality. It is important for responsive web designing.

  • Customization: CSS icons can be customized by changing their size, color, and other visual properties using CSS rules. This flexibility allows you to match the icons to your website”s overall design and branding.

  • Accessibility: CSS icons can be styled to meet accessibility standards, such as providing alternative text for screen readers.

  • Reduced HTTP Requests: Using CSS icons can reduce the number of HTTP requests made by a webpage since they are often part of the stylesheet.

How to Add Icons to a Webpage?

  • Inline SVGs: Involves embedding SVG (Scalable Vector Graphics) directly into your HTML code. You can create or obtain SVG icons and insert them as inline elements.

  • Icon fonts: Icon fonts are custom fonts that contain icons as glyphs. You can use these fonts to display icons by setting the appropriate font-family and specifying the icon”s Unicode character.

  • CSS background images: You can use CSS background images to display icons by setting the background-image property on an element.

  • Pseudo-elements: Involves using the ::before and ::after pseudo-elements to insert content before or after an HTML element and then styling that content to display an icon.

  • CSS Libraries and Frameworks: Many CSS libraries and frameworks, like Font Awesome, Material Icons, and Google Icons, provide pre-designed sets of icons that you can easily include in your projects. They often come with ready-to-use classes or utility classes.


Icons Using SVG

In HTML <svg> tag can be used to create custom icons using d attribute of <path>.

The d attribute of the <path> tag in SVG defines the shape of the path using a series of commands and parameters in a predefined syntax, representing lines, curves, and other geometric shapes. These commands include moveto (M), lineto (L), curveto (C), and others, each followed by coordinates or control points that specify the path”s structure.

Example


<!DOCTYPE html>
<html>

<head>
    <style>
        .icon {
            width: 24px; 
            height: 24px; 
            fill: #000; 
            margin-left: 15px;
        }
    </style>
</head>

<body>
    <h1>SVG Icons</h1>
    <!-- Search Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M23.707 22.293l-6.364-6.364C18.454 14.68 19 13.418
                 19 12c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.418 
                 0 2.68-.546 3.929-1.071l6.364 6.364a1 1 0 0 0 1.414-1.414zM5 
                 12c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6z"/>
    </svg>
    
    <!-- Download Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19 14v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-7-9h2v7h3l-4 4-4-4h3V5zm-1-2h4V0h-4v3z"/>
    </svg>
    
    <!-- Cloud Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19.35 10.04c.63-.34 1.22-.79 1.68-1.35C21.47 6.39 19.76 4 
                 17 4c-2.33 0-4.31 1.45-5.13 3.5H11.5C8.42 7.5 6 9.92 6 13s2.42
                 5.5 5.5 5.5h7c3.04 0 5.5-2.46 5.5-5.5-.01-2.52-1.65-4.67-4-5.46l.35.5z"/>
    </svg>
    
    <!-- Home Icon -->
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l10 9h-3v11h-6V14H9v8H3V11H0l12-9z"/>
    </svg>
</body>
</html>


Icons Using Icon Fonts

To use icon fonts in your web project, you need to follow this steps:

  • Include the icon font library, Popular choices include Font Awesome, Material Icons, or custom icon fonts.

  • Use <i> tag in HTML and apply the icon font class to it. Then, specify the Unicode character for the desired icon.


Example


<!DOCTYPE html>
<html>

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

    <style>
        .icon {
            /* Specify Font Awesome family */
            font-family: "Font Awesome 5 Free"; 
            /* Minimum Font weight for Font Awesome */
            font-weight: 600;
            font-size: 24px; 
            color: #000; 
            margin-right: 15px; 
        }
    </style>
</head>

<body>
    <h1>CSS font Awesome Icons</h1>
    <span class="icon"> &amp#xf002; </span> 
    <span class="icon"> &amp#xf019; </span>
    <span class="icon"> &amp#xf0c2; </span> 
    <span class="icon"> &amp#xf015; </span> 
</body>

</html>



Icons Using Images

The background-image property in CSS can also used to display icons that are stored at system storage.


Example

Following example demonstrates using background image as an icon:


<DOCTYPE html> 
<html>

<head>
    <style>
        .icon-img {
            width: 30px;
            height: 30px;
            background-image: url(''/css/images/logo.png'');
            background-size: cover;
        }
    </style>
</head>

<body>
   <div class="icon-img"> </div>
</body>

</html>


Icons Using Pseudo-Elements

Pseudo-elements like ::before and ::after can be used to insert an icon before or after an element as demonstrated in the following example.

To know more about pseudo-elements check out tutorial on CSS Pseudo-Elements.

Example

Here in this example we use pseudo element to render icons.


<DOCTYPE html> 
<html>

<head>
    <style>
        li {
            list-style: none;
        }
        li::before {
            content: url(/css/images/smiley.png);
            margin-right: 15px;
            font-size: 20px;
        }
        p::after {
            content: url(/css/images/smiley.png);
            margin-left: 15px;
            font-size: 5px;
        }
    </style>
</head>

<body>
    <ul>
        <li>Butterscotch</li>
        <li>Chocolate</li>
        <li>Coconut</li>
    </ul>

    <p> 
        In the above list we made custom label using 
        before pseudo-element, we added icon at the end 
        of this paragraph using ::after pseudo-element. 
    </p>
</body>

</html>



Icons Using Google Icons

We can also use icons provided by Google Icons in our webpage. This way you can call any icon by just mentioning the name of icon.

You just need to add the following link in the head section of your html code:


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

Note: There is no need to install or download Google icons.


Example

Following example demonstrates using Google Icons.


<DOCTYPE html> 

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

<body>
    <h1> Google Fonts Icon </h1>
    <span class="material-icons" style="font-size:40px;"> 
        pets 
    </span>
    <span class="material-icons" style="font-size:40px;">
        settings
    </span>
    <span class="material-icons" style="font-size:40px;">
        attachment
    </i>
    <span class="material-icons" style="font-size:40px;">
        person
    </span>
</body>

</html>


Bootstrap Icons

To use Bootstrap icon add following code in head section of your webpage.


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


Example

Following example demonstrates using Bootstrap Icons:


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

<body>
    <h1> Bootstrap Icons </h3>
    <span class="glyphicon glyphicon-cloud"> </span>
    <span class="glyphicon glyphicon-remove"> </span>
    <span class="glyphicon glyphicon-user"> </span>
    <span class="glyphicon glyphicon-envelope"> </span>
    <span class="glyphicon glyphicon-thumbs-up"> </span>
</body>

</html>



Print Page




Previous



Next


Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *