Font Awesome

There are many options for icons out there, but I chose Fontawesome. It's quite easy to use, but I kept forgetting how. Hence this guide, with quick links.

This guide is made using resources from FontAwesome's website, and is in progress. Use at your own risk! These resources are for personal references first, and I claim no expertise, know-how, accuracy, intelligence, or anything else of the kind.

Uploading Font Awesome on your website

1. Create a new Font Awesome Kit
   1. Set the kit name to reflect your website
   2. Icons: Pro
   3. Technology: SVG
2. Add the Kit code to the head of index.php

Displaying Font Awesome Icons on your website

Option 1: inline HTML

Example: <i class="fa-alien fa-brand">

See additional examples on Codepen.

1. Use HTML tag with attribute <i class="">
2. Pick an icon here
3. Enter the icon name in the class attribute, prefixed with fa-. Ex: fa-alien
4. Add the shorthand class name for the style you want to use:

Option 2: With CSS pseudo-elements ::before and ::after

Source: CSS Pseudo-elements | Font Awesome Docs

• font: var(--fa-font-solid)
• content: "\f8f5"
• display: inline-block
• text-rendering: auto
• -webkit-font-smoothing: antialiased

Font styles :

• Solid : --fa-font-solid
• Regular : --fa-font-regular
• Thin : --fa-font-thin
• Brands: --fa-font-brands

Unique CSS for Duotone: use: ::before and ::after simultaneously

Note: Duotone must have a parent container with left-padding.

parent {

• position: relative
• padding-left: 1.25em

child::before, child::after {

• font: var(--fa-font-duotone);
• position: absolute;
• left: 0;
• top: 50%;
• transform: translateY(-50%);
• width: 1.25em;
• text-align: center;
• display: inline-block;
• text-rendering: auto;
• -webkit-font-smoothing: antialiased;

child:before {

• color: var(--fa-primary-color, inherit);
• opacity: 1;
• opacity: var(--fa-primary-opacity, 1.0);

child:after {

• color: var(--fa-secondary-color, inherit);
• opacity: var(--fa-secondary-opacity, 0.4);

Style your icon

Learn how to size, animate, and do other fancy things with your icons.

Sizing

This section is incoming.

Animate

This section is incoming.

Duotone

This section is incoming.

Icon Lists

This section is incoming.

Stack

This section is incoming.

Counters

This section is incoming.

Power Transforms

This section is incoming.

Notes

• Version 5.x" or "6.x" always serves the latest version that's been released. Choose a specific version if you'd like to upgrade your kit manually each time.
• Alternative Method: A local folder of downloaded icons. Lear more here. Note that this method is less desired because
1. You won't automatically get the most updated icons from FontAwesome;
2. You'll use the Web Font technology over SVG.
• FYI: I personally have no use for Font Awesome APIs.