Cheatsheet Font Awesome Free version 5.13.0. Cara menggunakan font awesome cukup mudah yaitu dengan menambahkan font (pada Android/iOS) atau dengan menambahkan CSS jika menggunakan platform web. Berikut salah satu contoh penggunaannya. Font Awesome 5 Intro Icons Accessibility Icons Alert Icons Animals Icons Arrows Icons Audio & Video Icons Automotive Icons Autumn Icons Beverage Icons Brands Icons Buildings Icons Business Icons Camping Icons Charity Icons Chat Icons Chess Icons Childhood Icons Clothing Icons Code Icons Communication Icons Computers Icons Construction Icons. The complete Font Awesome 4.3.0 icon reference for Android - edtorba/FontAwesome-Cheatsheet-for-Android. Font Awesome Cheatsheet: Page 1. Font Awesome Class, Font Awesome CSS, Font Awesome Unicode. Fontawesome Cheatsheet - The complete Font Awesome cheat sheet with Font Awesome CSS code, and Font Awesome Unicode. Font Awesome icons can be used just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used.
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.
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:
<script src='https://kit.fontawesome.com/yourcode.js'></script>
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>
<i></i>
</body>
</html>
<html>
<head>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<i></i>
</body>
</html>
Results in:
Try It Yourself »Note: No downloading or installation is required!
Get Your Own KIT CODE
Sign up and get your own code for free at:
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
<i></i>
<i></i>
<i></i>
Results in:
Try It Yourself »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.
Example
<i></i>
<i></i>
<i></i>
Results in:
Try It Yourself »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:
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
Results in:
Try It Yourself »Videoboxpro 1 5 4 x 2. The
fa-ul
and fa-li
classes are used to replace default bullets in unordered lists.Example
The following code:
<ul>
<li><span><i></i></span>List Item</li>
<li><span><i></i></span>List Item</li>
<li><span><i></i></span>List Item</li>
</ul>
<li><span><i></i></span>List Item</li>
<li><span><i></i></span>List Item</li>
<li><span><i></i></span>List Item</li>
</ul>
![Cheatsheet Cheatsheet](https://creativepro.com/wp-content/uploads/sites/default/files/20140303-font2.jpg)
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
Microsoft powerpoint 2016 – microsofts presentation designer. The following code:
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
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:
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
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:
<span>
<i></i>
<i></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span>
<i></i>
<i></i>
</span>
fa-twitter on fa-circle (regular)<br>
<span>
<i></i>
<i></i>
</span>
fa-ban on fa-camera
<i></i>
<i></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span>
<i></i>
<i></i>
</span>
fa-twitter on fa-circle (regular)<br>
<span>
<i></i>
<i></i>
</span>
fa-ban on fa-camera
Results in:
Fontawesome Cheatsheet 3
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
<p>Fixed Width:</p>
<div><i></i> Icon 1</div>
<div><i></i> Icon 2</div>
<div><i></i> Icon 3</div>
<p>Without Fixed Width:</p>
<div><i></i> Icon 1</div>
<div><i></i> Icon 2</div>
<div><i></i> Icon 3</div>
<div><i></i> Icon 1</div>
<div><i></i> Icon 2</div>
<div><i></i> Icon 3</div>
<p>Without Fixed Width:</p>
<div><i></i> Icon 1</div>
<div><i></i> Icon 2</div>
<div><i></i> 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:
<i></i>
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.
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.
Fontawesome Cheatsheet Brands
Results in:
Try It Yourself »