Font Awesome 5 Icons



GitPitch provides a PITCHME.md markdown shortcut syntax that can be used to render Font Awesome 5 Solid & Brand Icons. This features gives GitPitch presentation authors the use of up to 2000 beautifully rendered icons for use within any slideshow.

Due to license restrictions, Font Awesome 5 Pro Icons are not available for use on GitPitch slides.

FONTAWESOME

Click on the above image to experience Font Awesome icons in a live GitPitch presentation.


FA5 Solid Icons Basic Syntax

The solid icon markdown shortcut syntax is as follows:

@fa[solid-icon-name]

Where solid-icon-name identifies any of the over 1500 solid icons listed in the FA5 Solid Icons Gallery.

For example, to render the fa-code-branch icon on a slide use the following syntax:

@fa[code-branch]


FA5 Solid Icons Basic Syntax with Label

You can also associate a text label alongside any solid icon using the following syntax:

@fa[thumbs-up](Sounds good to me!)


FA5 Brand Icons Basic Syntax

The brand icon markdown shortcut syntax is as follows:

@fab[brand-icon-name]

Where brand-icon-name identifies any of the over 400 brand icons listed in the FA5 Brand Icons Gallery.

For example, to render the fa-docker icon on a slide use the following syntax:

@fab[docker]


FA5 Brand Icons Basic Syntax with Label

You can also associate a text label alongside any icon using the following syntax:

@fab[digital-ocean text-bold](Digital Ocean)

Note the use of text-bold in this example. It’s a built-in CSS utility style. You can learn more about activating custom CSS styles on Font Awesome icons here.


Font Awesome Icon Sizing

You can easily control the size of any icon on your GitPitch slides:

@fa[umbrella fa-xxx]

Here fa-xxx can take any of the following values for progressively larger icons:

  • fa-xs
  • fa-sm
  • fa-lg
  • fa-2x
  • fa-3x
  • fa-4x
  • fa-5x
  • fa-7x
  • fa-10x

Font Awesome icon sizing can be used with solid and brand icons.


Font Awesome Icon Rotations

You can rotate, flip, or mirror an icon on your GitPitch slides:

@fa[snowman fa-xxx]

Here fa-xxx can take any of the following rotation values:

  • fa-rotate-90
  • fa-rotate-180
  • fa-rotate-270
  • fa-flip-horizontal
  • fa-flip-vertical
  • fa-flip-both

Font Awesome icon rotations can be used with solid and brand icons.


Font Awesome Icon Animations

You can spin or pulse (rotate-in-8-steps) any icon on your GitPitch slides:

@fa[spinner fa-xxx]

Here fa-xxx can take any of the following animation values:

  • fa-spin
  • fa-pulse

Font Awesome icon animations are best used with the set of Font Awesome 5 Spinner Icons


Font Awesome Custom Styles

Beyond the use of icon labels, sizing, and animations you can also create your own custom CSS styling rules and activate those styles for any icon.

For example, to activate a custom color for an icon on your slide use the following CSS snippet:

.shocking-pink { color : #fc0fc0; }

Then apply this color to the Font Awesome icon on your slide by using your your custom CSS class as follows:

@fa[puzzle-piece fa-spin shocking-pink]

The resultant icon will be rendered using the color identified by your .shocking-pink class. In this example, the icon will also automatically rotate thanks to the use of the fa-spin animation class.

Font Awesome custom styles can be used with solid and brand icons.


Font Awesome 4 Backwards Compatibility

Older GitPitch presentations may reference Font Awesome 4 icon names. Every effort has been made to provide seamless backward compatibility for these presentations. In most cases, no changes are required.

However, if you find older icons are no longer rendering on your slides, please update your PITCHME.md to use the latest shortcut syntax and Font Awesome 5 icon names as detailed in this guide.