Icons

The Joystick UI Framework uses Font Awesome for UI icons.

Font Awesome provides with over 600 icons that are simple to use in your UI. View all the icons on the Font Awesome icons page.

Since Font Awesome is an icon font, you can style the icons with CSS font styles the same as you would any text. Apply color, text-shadow, transitions, transforms and more with you CSS styles.

Installing Font Awesome

Font Awesome does not come bundled with Joystick, but we do highly recommend that you use it in your project. There are a few Joystick components that do require icons, so if you are using any of those, you will need to install Font Awesome.

Font Awesome's Get Started page provides you with several options for installing and using Font Awesome in your project. The simplest solution is to request a CDN embed code to include in your project.

Get Font Awesome

Components that use icons

Portions of the following components make use of Font Awesome icons.

Badges: Badges with icons
Buttons: Buttons with icons
Navbar: Responsive Navbars
Typography: Unordered lists

Basic Usage

Include an icon by using the CSS class fa and the icon's name. The icons are designed to be used with inline elements. You can use either <i> tags or <span> tags to include an icon.

fa-gamepad
fa-camera-retro

<i class="fa fa-gamepad"></i> fa-gamepad
<br>
<i class="fa fa-camera-retro"></i> fa-camera-retro

Size

Increase the size of icons by adding fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i class="fa fa-fighter-jet fa-lg"></i> fa-lg <br>
<i class="fa fa-fighter-jet fa-2x"></i> fa-2x <br>
<i class="fa fa-fighter-jet fa-3x"></i> fa-3x <br>
<i class="fa fa-fighter-jet fa-4x"></i> fa-4x <br>
<i class="fa fa-fighter-jet fa-5x"></i> fa-5x

Spin

Make an icon spin by adding the fa-spin class to any icon. Use fa-pulse to have it rotate in 8 steps, which works well with fa-spinner, fa-refresh, and fa-cog.

<i class="fa fa-3x fa-spinner fa-spin"></i>
<i class="fa fa-3x fa-circle-o-notch fa-spin"></i>
<i class="fa fa-3x fa-refresh fa-spin"></i>
<i class="fa fa-3x fa-cog fa-spin"></i>
<i class="fa fa-3x fa-spinner fa-pulse"></i>

Rotate & Flip

Rotate and flip icons with the following fa-rotate-* and fa-flip-* classes.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

<i class="fa fa-umbrella fa-3x"></i> normal<br>
<i class="fa fa-umbrella fa-3x fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-umbrella fa-3x fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-umbrella fa-3x fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-umbrella fa-3x fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-umbrella fa-3x fa-flip-vertical"></i> fa-flip-vertical

Visit the Font Awesome examples page for more examples about how you can use the icons.