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/

Exercise

  1. Open your editor, create a new file and save it as exersice03.3.04.html in the folder "Exercises".
  2. Modify and save the file. The browser's output should be as shown in the following image:

Solution:

RGB (245, 130, 32)