Font Awesome Tasks Icon (Activity, Assignment)

In this tutorial, we will learn how to use the Font Awesome Tasks icon, which is represented by fa fa-tasks. It serves multiple purposes, such as an assignment tracker, resembling a checklist. Additionally, we can modify its color, font size, style, and animation in the 'Try It' editor.

Fontawesome Version 4.X

tasks

<i class='fa fa-tasks'></i>

tasks

<i class='fa fa-tasks' style='color: white'></i>

tasks

<i class='fa fa-tasks' style='color: red'></i>

tasks

<i class='fa fa-tasks' style='color: blue'></i>

tasks

<i class='fa fa-tasks' style='color: #f3da35'></i>
Try it Yourself


Fontawesome Version 5.X

tasks

<i class='fas fa-tasks'></i>

tasks

<i class='fas fa-tasks' style='color: white'></i>

tasks

<i class='fas fa-tasks' style='color: red'></i>

tasks

<i class='fas fa-tasks' style='color: blue'></i>

tasks

<i class='fas fa-tasks' style='color: #f3da35'></i>
Try it Yourself

How to add Font Awesome tasks Icon ?

Font Awesome Icon fa fa tasks 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-tasks'></i>
Icon Code -
fa fa-tasks

HTML Code

Get complete html code for icon tasks

                    
                    <!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-tasks'></i>
                        </body>
                    </html>                    

Tags

alingment,text,type

Change Font Awesome Icon Tasks 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-tasks blue-color'></i> <i class='fa fa-tasks green-color'></i> <i class='fa fa-tasks teal-color'></i> <i class='fa fa-tasks yellow-color'></i> <i class='fa fa-tasks 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'>            
            
Related Icons
 

Tasks Icon Font Awesome - FAQs

⭐What is the Font Awesome Tasks Icon code?

Icon Code is - fa fa-tasks.

⭐ What does the fa fa-tasks Icon mean?

fa fa-tasks is the Icon code of Font Awesome Tasks.

⭐ Can we add fa fa-tasks Icon in different sizes?

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

⭐ How to add a Blue color Font Awesome Tasks Icon?

Add the blue color Tasks icon of the font awesome by using code: fa fa-tasks style='color: blue;'.

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

To change the Tasks icon to white color use code: fa fa-tasks style='color: white;'.

Advertisements



Advertisements



Looking For More Icons?