Applying CSS

Icons

Icons is a very smart way to create visual contents without using images.

There are lot icon Libraries.

Here we will use the Font Awesome library.

It is easy to insert Font Awesome icons into your code and there are detailed instructions for that.

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:

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

Note, that you can change their color using the common CSS rules.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <h3> <i class="fa fa-info-circle" aria-hidden="true"></i> Information icon</h3>
  </body>
</html>

will create a page displayed as:

Font Awesome

For more information about icons: https://www.w3schools.com/icons/