Icons

We will learn about the different types of icons, how we can use icons and what the ways to use them are, and different types of icons examples. We can check online and use it anywhere.

 Types of icons

  1. Font Awesome Icon
  2. Material Icons
  3. Bootstrap Icons,
  4. Google Icons etc
  5. Glyphicon Icons.
  6. Web Font etc.

How to use icons

We can use icons by using icon class. It is used by anyone HTML element but it is often use with <i> and <span> element. Different icon has their own libraries files.

 We can use it two ways:

  • CDN ( Content Delivery Network): it means we can use icons CDN link inside the head section.

    • Example:

    Try Now

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exampe icons</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
<body>
      <p> we can  see in head section we have use cdn link.</p>
      <I class="fa fa-user">User</i>
</body>
</html>
  • Offline: It means we can download the library file and put the correct path of the icon's name in head section.

    • <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exampe icons</title>
 <link rel="stylesheet" href=" css/font-awesome.min.css">
</head>
<body>
      <p> we can see css is folder where we downloaded the icon library files</p>
      <I class="fa fa-user">User</i>
</body>
</html>

    Note: when we use CDN (content delivery network ) then we need an internet connection but when using downloaded icon library files then we don’t need an internet connection.

    We should use offline because we don’t have any time internet connect.

    We can customize icons with CSS ( size color, shadow, font style )