font awesome assignment icon

• Get Started
•   All Icons
•   New Icons in 4.7
•   Web Application Icons
•   Accessibility Icons
•   Hand Icons
•   Transportation Icons
•   Gender Icons
•   File Type Icons
•   Spinner Icons
•   Form Control Icons
•   Payment Icons
•   Chart Icons
•   Currency Icons
•   Text Editor Icons
•   Directional Icons
•   Video Player Icons
•   Brand Icons
•   Medical Icons
• Basic Icons
• Larger Icons
• Fixed Width Icons
• Bordered & Pulled Icons
• Animated Icons
• Accessibility-Minded
• Rotated & Flipped Icons
• Stacked Icons
• Bootstrap 3 Examples
• Accessibility

fa-tasks · Unicode: f0ae · Created: v2.0 · Categories: Web Application Icons

After you get up and running , you can place Font Awesome icons just about anywhere with the <i> tag:

Note: to improve web accessibility , we recommend using aria-hidden="true" to hide icons used purely for decoration.

Font Awesome

Introducing the fa-youtube channel: get icon-smart with 5 new bite-sized font awesome tutorials .

In this classroom, I will suspend all disbelief. 

Hey there, smarty pants! Are you ready to get schooled in the wonderful world of Font Awesome? Well, good news, class is in session. We’ve officially launching our new YouTube channel featuring five new bite-sized screencasts that introduce you to all things Font Awesome. 

We’re spotlighting our new educational videos, and when we put these together, we decided to start with the basics first. Think of these screencasts as Font Awesome 101. 

What the Font Awesome tutorials cover

How to set up your first kit.

A Font Awesome Kit is like a suitcase that carries all the icons and awesomeness you need in a neat little lightweight bundle you can pack into your project easily. We’ll show you how to get set up, add icons and style, or fine-tune your icons’ performance – we’ve got what you need to know to use Font Awesome icons on the web.

How to find and use icons

You can place Font Awesome icons just about anywhere, and make it so that icons take on characteristics and blend in with the surrounding text naturally. We’ll cover the basics of setting up Font Awesome and finding that perfect icon and icon style for your project.

Change the size and color of icons

While getting icons into your project is straight-forward, we’ve also provided additional styling utilities for things like sizing and coloring your icons to make your icons even more awesome. 

How to upload your own custom icon

Now with the magic of Kits, you can upload your own icons and use them alongside – or in place of – official Font Awesome icons! We’ll cover the basics of uploading and using your own icons alongside Font Awesome.

How to subset your icons in Kits 

Have you ever overpacked your book bag? Schlepping extra weight around campus is a drag. We think you should have options for how you build with tech, too. With Subsetting, you can “travel light” whenever you want by choosing just the icons you need, making your site faster than ever.

Revisiting the video(s) that got everything started … 

To celebrate the occasion of our short batch of screencasts, we thought it’d be fun to also feature our original Kickstarter video, the first Font Awesome 6 promo video — that was released under the radar — and the all new Font Awesome 6 video “commercial” that currently appears on our front page.

Fun fact : After our original Kickstarter video was completed, we heard from a pro in the know that injecting humor into tech videos usually falls flat. Well, we’re sure glad we didn’t get any advice to that effect while in pre-production because we’re all about delivering that punchline. We were also really blessed to find a marketing team that really helped capture Font Awesome’s personality. 

So just for giggles, check out the videos. We think you’ll think they’re pretty funny. 

An all-new way to listen to Podcast Awesome

In case you missed it, at the beginning of the year we started a podcast called — wait for it — Podcast Awesome. In this podcast, we talk about icons, design, tech, business, and nerdery with the Font Awesome team. And now we’ve added all episodes to our YouTube channel, too!

We come attcha every other week with 15 to 20-minute bite-size chunks so you can keep up with what’s new with Font Awesome, and get to know the fa-team. 

Get all your Font Awesome information and education in one place! 

With our newly launched YouTube channel you can keep all your media consumption in one tidy place. We’re just getting started with these simple screencasts, but we’ll add more to the syllabus in the months to come, so you can impress your friends and achieve master’s level iconification! 

PS. Last fall,  Shoelace joined the Font Awesome team . We’ve been hard at work on an all-new, super-sekrit project. Want to be the first one to find out the big news?

Discover more from Blog Awesome

Subscribe now to keep reading and get access to the full archive.

Type your email…

Continue reading

Search Results

Font awesome tasks icon (activity, assignment).

Fontawesome Version 4.X

Fontawesome version 5.x, 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.

Get complete html code for icon tasks

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.

Related Icons

Tasks icon font awesome - faqs.

Icon Code is - fa fa-tasks.

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

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

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

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

Advertisements

@Copyrights 2024

Disclaimer: All icons are added from various publically available open sources licensed under MIT, SIL, Apache 2.0, CC0 1.0, and ISC. FontAwesomeIcons.com is not related anyway to fontawesome.com, we are separate entity. If case of any copyright issue or feedback please connect us now - Email Us . Or Contact Us

Font Awesome

Psst! These demos are for you, an official Supporter. Please don't distribute them to the general public .

Getting Started with Font Awesome 5

Hey, thanks for supporting Font Awesome 5 and downloading a copy of our working project! The files in this folder are meant to serve as demos which show off all of the redesigned icons as well as how to use them.

From the beginning Font Awesome has always focused on making things easy for you. With version 5 we've completely re-thought how we do things. We're introducing the new JavaScript-based SVG Framework and also including an SVG sprite for each style. Here are all of your options.

The same battle-tested and reliable way Font Awesome has worked from the beginning .

• You want to stick with same technique FA 4 uses (and need IE9 support)
• You aren't quite ready for SVG icons and don't mind web fonts
• You need the most rock-solid low-risk way to use icons
• The prospect of using JavaScript doesn't sound appealing

SVG Framework

Uses the ridiculously flexible and powerful scalable vector graphics format (SVG).

• You agree with us: SVG is probably the best way to use icons
• Using JavaScript sounds simpler than web fonts
• You want the new features
• You need the most backwards compatibility

SVG Sprites

Clean, simple, and the perfect foundation for advanced users willing to do some work.

• You are an advanced user
• You are familiar with this technique and prefer it
• No dependencies on JavaScript or Web Fonts makes you giddy
• You are willing to write your own CSS and dominate lovingly control everything

Use Icons via SVG Framework

Our SVG Framework lets you reference icons just as you always have with Font Awesome and renders them as SVGs within your UI, complete with all of the supportive styling you know and love. This requires the use of JavaScript. Here's how to try it out:

• Grab the base Font Awesome loader at /js/fontawesome.js .
• Grab one or more of the styles (ex: /js/packs/solid.js ) in the /js/packs directory.
• Place these files in your project static files.
• Include them in the <head> of your document.
• Reference Font Awesome icons (using the inventory for easy copying/pasting) in the <body> of your document.

Example with multiple styles:

Need another example? Check out the SVG Framework demo .

Need Font Awesome 4 icon names that are missing in 5? Learn how to shim using the JavaScript version.

Browser Compatibility

Use icons via web font.

A Font Awesome traditionalist? We get ya. Font Awesome 5 still lets you load your icons as a custom icon font (using CSS's @font-face ). Here's how:

• Grab the base Font Awesome icon font supporting styling at /css/font-awesome-core.css
• Grab one or more of the style CSS files (ex. /css/font-awesome-light.css ) in the /css directory.
• Grab the corresponding web font files (ex. /webfonts/fontawesome-light-300.woff2 ) in the /webfonts directory.
• Include a reference to the CSS files in the <head> of your document.

Need another example? Check out the Web Font demo .

Use Icons via SVG Sprites

Want to use Font Awesome icons as SVGs in your project but want to do it without JavaScript or manage things more directly? We've prepped all of the icon styles as individual SVG sprites.

• Grab one of the sprite files ( /sprites/solid.svg ) in the /sprites directory.
• Place this file in your project static files.
• In the <body> of your document call an individual icon like this…

Need another example? Check out the SVG Sprites demo .

* IE will not automatically download SVG documents referenced with xlink:href

Cross-origin caveat

This requires that you are serving the sprite from the same domain and port as the page.

Serving locally

For this sprite to load you need to be serving it from http or https. If you try to open docs/svg-sprite.html from the file system (if your address begins with file:// ) it will fail to load.

Use Icons on the Desktop

Want to use Font Awesome 5's icons in your favorite Desktop Design tools or on a print-based project? No problem. Here's how to get that started:

• Grab one or more of the web font files for the icon styles you want to use (ex. /webfonts/fontawesome-light-300.ttf ) in the /webfonts directory.
• Add them to your Font Management Software (for Macs that often Font Book or Font Explorer X).
• Activate each added font you want to use in your applications.
• Open a file in a design application (ex. Sketch, Adobe Illustrator, etc.) and create a new text layer/area.
• Copy and paste the corresponding Font Awesome 5 glyph you want to add from the webfont demo (the little version of the icon next to each icon's unicode value).

Or grab one or more of the svg files from any style (ex. /svg/solid/user.svg ) in the /svg directory.

Upgrading from Font Awesome Version 4

For those that are super-stoked to start using version 5, you can upgrade the version of Font Awesome you're using on a site or project. Below are the basic steps we recommend following:

• Remove the files associated with Font Awesome Version 4 from your project - including the fontawesome/ folder of web fonts and CSS/SCSS/LESS (if you're using Font Awesome's CDN , you can skip this step.)

Remove the reference to Font Awesome V4's JS or CSS from the <head> of your document.

• Pick your method of using Font Awesome 5: SVG Framework , Web Font Framework , or SVG Sprite .
• Follow the instructions and example code + demos for the method you've chosen.
• Find and replace any icons that have different names between V4 and V5 (with SVG Sprites, you'll need to change the syntax of every icon's reference more drastically + provide your own styling to support how they look).
• Update or remove any custom styling you've added around Font Awesome icons (if applicable).
• Click through your project's UI to make sure all icons are rendering as expected (optional, but recommended with betas).

Heads up about referencing icons

Not all icons and aliases from V4 are the same in V5. So what's changed?

• We no longer have aliases in version 5, an icon has one official name
• Some names have been changed to be more consistent
• Any brand icons now have a prefix of fab
• Any icon that ended with -o now has a prefix of far and no -o suffix

Need help? Use the shim.

We know that these changes can really slow you down in adopting V5. To help out we've created a shim file if you decide to use the JavaScript method. You can use the old names and aliases and it will automatically convert things for you as your icons get replaced with SVG icons.

Example Font Awesome version 4 shim (JavaScript method only):

Questions comments feedback.

We're still in beta land with Font Awesome 5, so we need your help. Please provide feedback about this release specifically in our designated thread . Design feedback, bugs and questions are welcome there. For future feature and icon requests, check out our contributing doc .

SVG Icon Names

You can use the Font Awesome Icon Name with the SVG + JS method to display the icons on your page.

Add Icons with the Icon Name

You can add any icon in any style with the icon name when using the SVG+JS method. Just add the class for the style you want to use to select the style of icon, then insert the icon name between the opening and closing <i> element.

Here are some examples:

Where do I find an icon’s name?

When searching for icons, the icon name is directly under the icon itself.

Or, if you have clicked on an icon, the icon name is in the icon preview modal.

Download 501 free Assignment Icons in All design styles.

• User documentation

Icons Tutorial

Font awesome 5, font awesome 4, font awesome introduction, basic icons.

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: No downloading or installation is required!

You place Font Awesome icons by using the prefix fa and the icon's name.

The following code:

Results in:

Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons.

Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.

Advertisement

Larger Icons

The fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes are used to increase the icon sizes relative to their container.

Tip: If your icons are getting chopped off on top and bottom, increase the line-height.

The fa-ul and fa-li classes are used to replace default bullets in unordered lists.

Bordered and Pulled Icons

The fa-border , fa-pull-right or fa-pull-left classes are used for pull quotes or article icons.

Animated Icons

The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.

Note: IE8 and IE9 do not support CSS3 animations.

Rotated and Flipped Icons

The fa-rotate-* and fa-flip-* classes are used to rotate and flip icons.

Stacked Icons

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.

The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.

Fixed Width Icons

The fa-fw class is used to set icons at a fixed width. This class is useful when different icon widths throw off alignment. Especially useful in Bootstrap's navlists and list groups.

Font Awesome also works great with all the Bootstrap components.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Set Up with React

When using Font Awesome with React, we recommend using our official react-fontawesome component to make everything work just right.

We’ll cover the basics of using the official react-fontawesome component (described below), which uses the SVG + JS method to render icons. But you can opt to use the Web Fonts + CSS method if you prefer.

Follow the steps below to set up the react-fontawesome component in your project.

1. Add SVG Core

First you’ll need to use npm or yarn to install the core package which includes all the utilities to make the icons work:

Find out more about what’s in Font Awesome core

2. Add Icon Packages

Next, you’ll install the icons you want to use — you can choose a Kit Package or SVG Icon Packages, and select any of our styles .

For Pro icons, you’ll first need to set up access with your secret Font Awesome npm token and global or per-project access.

Then add the Pro icon style packages that you plan to use in your app:

• Kit Package
• Pro SVG Icon Package
• Free SVG Icon Package

3. Add the React Component

And lastly, install the Font Awesome React component :

You’re Ready to Add Icons!

Like Anakin said, it’s woooorking! All of our icons are now ready to do your project’s bidding. Learn how to add them to your React project and then use their power to bring order and style to your UI!

• Notifications

No notifications to show yet

You’ll see useful information here soon. Stay tuned!

• Animated icons
• Interface icons

Are you sure you want to delete this collection?

We’re sorry you canceled your Premium subscription

You can still enjoy Flaticon Collections with the following limits:

• You can choose only 3 collections to keep
• You can only add up to 100 icons per collection
• You can’t add Premium icons to your collection

The advantages of your collections have changed

Keep making the most of your icons and collections

20% OFF our Annual Premium Plan

Select 3 collections to continue:

You have 8 collections, but can only unlock 3 of them

Report download

Please indicate what problem has been found. Thanks!

Base 64 encoded image

Copy the base64 encoded data and insert it in your HTML or CSS document. Need help? Maybe this link can help you

CSS background

Using it for the web? Copy this link in your website:

How to attribute for other media?

Don’t you want to attribute the author?

Going Premium is easy and it also allows you to use more than 15,409,500 icons without attribution. Find out more information here

Select a color from the icon

Choose a new color

Custom palette

• Remove color
• Remove palette
• You have exceeded the number of color samples for this palette

Select a shape

Stroke width

You can only save 3 new edited icons per collection as a free user. Upgrade to save unlimited icons.

Your collection is locked. You can upgrade your account to get an unlimited collection.

You have reached the icons limit per collection (256 icons)

This feature is only available for registered users. Login or register

This icon has a gradient color and cannot be edited.

Group search results

You can group your results by author style, pack, or see all available icons on your screen.

Assignment Icons

• Delete filters

• Add to collection
• Copy to clipboard. Copying this asset counts as a download Copy to clipboard SVG PNG

Set your own limits

Gain access to over 15,409,500 icons in formats SVG, EPS, PSD & BASE64

Download what you want, cancel when you want

Related tags

Collection:

Over 15,409,500 icons for 8.25 USD /month

• No attribution required
• 15.4M icons & stickers in SVG, EPS, PSD & BASE64
• Unlimited downloads
• Browse ad-free

You must attribute the author

How to attribute for other media? How to attribute?

How likely are you to recommend Flaticon to a friend?

How about giving us a rating on Trustpilot

If you can spare a few minutes to leave us a review, we’d be super grateful 😃

Please visit: