Help:Font awesome

Font Awesome (FA) is an icon library designed to be easy to use and very versatile. DCCWiki has purchased a perpetual license for Font Awesome 5 Pro which allows any page within the DCCWiki. See the website fontawesome.com for a complete list of fonts and how to use them. Advanced icon processing and stacking is supported within DCCWiki.

Please see the vendor's website for complete usage details.

Examples

Basics

See: Vendor documentation - Basics

Code	Output
<i class="fal fa-lg fa-play" style="color: red"></i> Getting started</p>	Getting started
<span style="font-size: 3em; color: Tomato;"> <i class="fas fa-camera"></i> </span> <span style="font-size: 48px; color: Dodgerblue;"> <i class="fas fa-camera"></i> </span> <span style="font-size: 3rem;"> <span style="color: Mediumslateblue;"> <i class="fas fa-camera"></i> </span> </span>

Sizes

See: Vendor documentation - Sizing

Quickly control the size of the icon by using fa-sm, fa-lg, etc.

Code	Output
<i class="fas fa-camera fa-xs"></i> <i class="fas fa-camera fa-sm"></i> <i class="fas fa-camera fa-lg"></i> <i class="fas fa-camera fa-2x"></i> <i class="fas fa-camera fa-3x"></i> <i class="fas fa-camera fa-5x"></i> <i class="fas fa-camera fa-7x"></i> <i class="fas fa-camera fa-10x"></i>

Icons in a List

See: Vendor documentation - Lists

Have a different icon for each element in a list.

Code	Output
<ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li> </ul>	List icons can be used to replace bullets in lists

Rotating Icons

See: Vendor documentation - Rotating

Rotate any icon, which can dramatically change it's meaning.

Code	Output
<div class="fa-4x"> <i class="fas fa-snowboarding"></i> <i class="fas fa-snowboarding fa-rotate-90"></i> <i class="fas fa-snowboarding fa-rotate-180"></i> <i class="fas fa-snowboarding fa-rotate-270"></i> <i class="fas fa-snowboarding fa-flip-horizontal"></i> <i class="fas fa-snowboarding fa-flip-vertical"></i> <i class="fas fa-snowboarding fa-flip-both"></i> </div>

Animating Icons

See: Vendor documentation - Animation

Some icons can be set to automatically spin. Not all icons are capable of doing this.

Code	Output
<div class="fa-3x"> <i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> <i class="fas fa-stroopwafel fa-spin"></i> </div>

Stacked Icon

See: Vendor documentation - Stacked

Create a new icon using 2 or more icons stacked on top of each other. Of course, all the previous modifications such as animation, size, or rotating them still work. In the example below, the following combine 2 icons to create a new one.

Code

Output

<span class="fa-stack"><i class="fas fa-square fa-stack-2x"> </i><i class="fab fa-twitter fa-stack-1x fa-inverse"></i></span> <span class="fa-stack fa-2x"><i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i></span> <span class="fa-stack fa-2x"><i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-terminal fa-stack-1x fa-inverse"></i></span> <span class="fa-stack fa-4x"><i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-terminal fa-stack-1x fa-inverse"></i></span> <span class="fa-stack fa-2x"><i class="fas fa-camera fa-stack-1x"></i> <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i></span>

Duotone Icons

See: Vendor documentation: Duetone

Change the shades of various aspects of an icon. Below is basic usage, see the vendor's website for more advanced use.

Code	Output
<div class="fa-3x"> <i class="fad fa-camera"></i> <!-- a duotone style camera icon --> <i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon --> <i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon --> <i class="fad fa-fill-drip"></i> <!-- a duotone style fill-drip icon --> </div>