CSS Icons

The CSS allows the user to add icons on web page.

Font Awesome is an icon library through which icons can be added to a web page easily.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

Bootstrap Icons

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


Syntax:
<i class="glyphicon glyphicon-cloud" style="font-size:48px;"></i>


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
  
    <body>
      <i class="glyphicon glyphicon-cloud" style="font-size:48px;"></i>
    </body>

</html>

Font Awsome Icons

Link:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">


Syntax:
<i class="fas fa-cloud"></i>


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    </head>
  
    <body>
      <i class="fas fa-cloud"></i>
    </body>

</html>

Google Icons

Link:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


Syntax:
<i class="material-icons" style="font-size:36px;">cloud</i>


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
  
    <body>
      <i class="glyphicon glyphicon-cloud" style="font-size:48px;"></i>
    </body>

</html>