Icons

Showrunner's icons fall into one of two categories: FontAwesome or Custom.

Icons should be used in situations when a visual cue could help a user understand a concept more quickly. Because icons are meant to supplement text-based information, not replace it, they should almost always be be used in conjuction with a text label.

FontAwesome is a popular, robust, and open source icon library.

There are lots of ways to utilize FontAwesome’s icons, but in Showrunner we use them as a font. This makes the icons lightweight and easy to style. Instead of having to edit each individual icon's image file if we want to alter its color, for example, we just need to specify the color with a CSS declaration.

Usage Guidelines

If you want to use a FontAwesome icon in the app, you'll start by finding the name of your icon on the FontAwesome cheatsheet.

Copy the fa- prefixed name of your icon and use it inside of a semantic i tag, along with another class called fa.

It'll look like this:

<i class="fa fa-floppy-o"></i>

We also have a special class called o-icon that can be used in a parent span to make the icons look a bit more Showrunner-y, like this:

<span class="o-icon">
  <i class="fa fa-floppy-o"></i>
</span>

You can also combine the o-icon class with the special modifier class o-icon--dark. As we inevitably create more ways to style icons throughout the app, they'll use modifier classes like this one in conjunction with the base o-icon.

<span class="o-icon o-icon--dark">
  <i class="fa fa-floppy-o"></i>
</span>

For some screenwriting-specific ideas and concepts, we’ve designed our own custom icons.

These icons represent ideas like scene headings and tranisitions—things that aren't available in a library like FontAwesome, which is intended for broad, mainstream use.

Usage Guidelines

The markup for custom icons and FontAwesome icons is very similar, but with a few key differences.

The o-icon--custom class must be used in conjunction with o-icon. This special class name switches the font-family from FontAwesome to our own custom icon font. Without it, your icon won't appear.

<span class="o-icon o-icon--custom">
  <i class="icon-general"></i>
</span>

Like with FontAwesome icons, you can use modifier classes like o-icon--dark to alter your icon's appearance.

<span class="o-icon o-icon--dark o-icon--custom">
  <i class="icon-general"></i>
</span>

Custom Icon List

Below is a list of all of Showrunner's custom icons. To use one, paste its unique class name into the i tag, like in the examples above.