⭐ What does the fa fa-clock-o Icon mean?

fa fa-clock-o is the Icon code of Font Awesome Clock O.

⭐ Can we add fa fa-clock-o Icon in different sizes?

Yes, you can Icon of fa fa-clock-o in various pixels.

⭐ How to add a Blue color Font Awesome Clock O Icon?

Add the blue color Clock O icon of the font awesome by using code: fa fa-clock-o style='color: blue;'.

⭐ How to make white color icon of a Font Awesome Clock O?

To change the Clock O icon to white color use code: fa fa-clock-o style='color: white;'.

Font Awesome Clock O (Watch, Timmer,Pending)

Font Awesome includes the clock icon, which can be used to display time or duration. To use the clock icon, you need to add the class 'fa fa-clock-o' to an 'i' tag in your HTML code. You can also customize the size, color, and style of the icon using CSS properties. This Font Awesome clock icon is also known as 'fa-Clock O', 'Watch', or 'Timer'.

Try it v4

Fontawesome Version 4.X

clock o

clock o

clock o

clock o

clock o

Try it Yourself

How to add Font Awesome clock o Icon ?

Font Awesome Icon fa fa clock o Icon can be added to any web page simply as below. You can integrate Icon in web pages by just adding following below syntax & icon code.

Icon -

<i class='fa fa-clock-o'></i>

Icon Code -

fa fa-clock-o

HTML Code

Get complete html code for icon clock o

                    
                    <!DOCTYPE html>
                    <html>
                        <head>
                        <title>Page Title</title>
                        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
                       </head>
                        <body>
                        <i class='fa fa-clock-o'></i>
                        </body>
                    </html>

Change Font Awesome Icon Clock o Color

Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.


    <style>
    .blue-color {
        color:blue;
    }
     
    .green-color {
        color:green;
    }
     
    .teal-color {
        color:teal;
    }
     
    .yellow-color {
    color:yellow;
    }
    
    .red-color {
        color:red;
    }
   </style>
    
     <i class='fa fa-clock-o blue-color'></i>
      <i class='fa fa-clock-o green-color'></i>
      <i class='fa fa-clock-o teal-color'></i>
      <i class='fa fa-clock-o yellow-color'></i>
      <i class='fa fa-clock-o red-color'></i>

Output of the above example will be as below-

Note- Make Sure You have included the below Font Awesome file in header-

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

Font Awesome Clock O (Watch, Timmer,Pending)

Fontawesome Version 4.X

clock o

clock o

clock o

clock o

clock o

How to add Font Awesome clock o Icon ?

HTML Code

Tags

Change Font Awesome Icon Clock o Color

Related Icons

Search Results

Font Awesome Clock O (Watch, Timmer,Pending)

Fontawesome Version 4.X

clock o

clock o

clock o

clock o

clock o

How to add Font Awesome clock o Icon ?

HTML Code

Tags

Change Font Awesome Icon Clock o Color

Related Icons