Font Awesome Icons

GitPitch provides a markdown shortcut syntax that can be used to render Font Awesome 4.7 Icons within any slide.


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

Basic Syntax

The syntax is as follows:


Where icon-name identifies any of the over 600 Font Awesome 4.7 icons listed in the following icon gallery.

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


Basic Syntax with Label

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

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

Resizing Icons

Just as you can control the size of Font Awesome icons when used directly within HTML pages you can easily control the size of any icon within your GitPitch slides.

@fa[umbrella fa-size]

Here fa-size can take any of the following values for progressively larger icons: fa-lg, fa-2x, fa-3x, fa-4x, or fa-5x.

Further Customizations

Beyond the use of icon labels and resizing controls you can create your own custom CSS styling rules and associate them with any icon. You can control the color of any icon, or create custom sizing for your icons.

For example, activate Custom CSS for your presentations using the following CSS snippet:

.shocking-pink { color : #fc0fc0; }

Now to apply this color to a Font Awesome icon on your slide simply use the new CSS class as follows:

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

The resultant icon will be rendered using the color identified by the .shocking-pink class. The icon when rendered will also automatically rotate thanks to the use of the fa-spin class, an animation class provided by Font Awesome library.