Help:Font awesome

DCCWiki, a community DCC encyclopedia.
Jump to: navigation, search

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 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.



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 style="font-size: 48px; color: Dodgerblue;">
<i class="fas fa-camera"></i>

<span style="font-size: 3rem;">
<span style="color: Mediumslateblue;">
<i class="fas fa-camera"></i>


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>
  • 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>

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>

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 -->