Cheatsheet Fontawesome

Posted on 18.02.2021 Чт by admin

Fontawesome Cheatsheet Pro
Cheatsheet Font Awesome 4
Font Awesome Icon Codes
Fontawesome Cheatsheet Pdf

Font Awesome 5

Font Awesome 5 has a PRO edition with 7842 icons, and a FREE edition with 1588 icons. This tutorial will concentrate on the FREE edition.

To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.

Font Awesome 5 Released! More Icons Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further.

We prefer the KIT CODE approach. Once you get the code you can start using Font Awesome on your web pages by including only one line of HTML code:

Figma Community plugin — This is the unofficial plugin for the Font Awesome Icon Collection. The plugin provides access to the entire free icon collection. All icons are in vector format. Plugin allows you to filter the list of icons by name.

Example

We got the code a076d05399 and by inserting the script tag, with the code, we can start using Font Awesome:

<!DOCTYPE html>
<html>
<head>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>

</body>
</html>

Results in:

Try It Yourself »

Note: No downloading or installation is required!

Get Your Own KIT CODE

New in Font Awesome 5

New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa.

The s in fas stands for solid, and some icons also have a regular mode, specified by using the prefix far:

Example

Results in:

Try It Yourself »

Font Awesome is designed to be used with inline elements. The  and  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.

Fontawesome Cheatsheet Pro

Example

Results in:

Try It Yourself »

Cheatsheet Font Awesome 4

The fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, or fa-10x classes are used to adjust the icon sizes relative to their container.

Example

The following code:

Results in:

Try It Yourself »

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

Example

The following code:

Results in:

Try It Yourself »

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

Example

Font Awesome Icon Codes

The following code:

Results in:

Try It Yourself »

Note: IE8 and IE9 do not support CSS3 animations.

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

Example

The following code:

Results in:

Try It Yourself »

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.

Example

The following code:

fa-twitter (inverse) on fa-circle (solid) 




fa-twitter on fa-circle (regular) 




fa-ban on fa-camera

Results in:

Try It Yourself »

Just like letters and other characters, icons can have different widths, and if you need to vertically align icons like in a list or a menu, this can be a problem.

The fa-fw class is used to set icons at a fixed width.

Example

Fixed Width:
<div> Icon 1</div>
<div> Icon 2</div>
<div> Icon 3</div>
Without Fixed Width:
<div> Icon 1</div>
<div> Icon 2</div>
<div> Icon 3</div>

Results in:

Try It Yourself »

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

Example

The following code:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Results in:

Try It Yourself »

One Font, 744 Icons

In a single collection, Fork Awesome is a pictographic language of web-related actions.

No JavaScript Required

Fewer compatibility concerns because Fork Awesome doesn't require JavaScript.

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

Free, as in Speech

Fork Awesome is completely free for commercial use. Check out the license.

CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Fontawesome Cheatsheet Pdf

Perfect on Retina Displays

Fork Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Plays Well with Others

Originally designed for Bootstrap, Fork Awesome works great with all frameworks.

Desktop Friendly

To use on the desktop or for a complete set of vectors, check out the cheatsheet.

Accessibility-minded

Fork Awesome loves screen readers andhelps make your icons accessible on the web.

Thanks To

Thanks to @davegandy for his original work on Font Awesome and to @gtagliala for managing pull requests and issues on the Font Awesome Github repo.

Thanks to the still growing community of 115 contributors who've carried this project from the early days of Font Awesome and who have joined this project since the fork. If you feel your contribution has not been recognized. Please file an issue, we'll happily add you to the list.