README

CSS animations for Font Awesome (and other icon libraries!).

Status

View Preview

Status
Quick Start
What's included
Bugs and feature requests
Installation
How to Use
Versioning
Changelog
Team
Code of Conduct
Copyright and License

Quick Start

Several options are available:

Download the latest release.
Clone the repo: git clone https://github.com/the-muda-organization/font-awesome-animations.git
Install with Composer: composer require the-muda-organization/font-awesome-animations

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

There are no dependencies. Library is designed for Font Awesome 5. See below for Installation Guide and How to Use

fa-animations/
 │
 └─ dist/
    │
    ├── fa-animations.css
    └── fa-animations.min.css

Bugs and feature requests

Have a bug or a feature request? Before opening a new issue search for existing and closed issues. If your problem or idea is not addressed yet, open a new issue.

Installation

Download and copy files to your project
Add CSS to your project:

    <link href="https://example.com/fa-animations/1.x.x/fa-animations.min.css" rel="stylesheet">

Ready to use!

How to Use

Animations work with any Font Awesome prefix fad, fal, far and fas. Not tested on other icon librairies but it should work with little or no customization.

This library does not include default Font Awesome animations: fa-spin and fa-pulse.

Font Awesome Animations uses custom classes .faa or .faa-parent and custom prefix faa-.

There are 2 types of animations: regular and on hover.

A) Regular animations

Add faa and faa-animation-name classess to the icon.

<i class="fad fa-camera faa faa-bounce"></i>
<i class="fal fa-camera faa faa-pulse"></i>
<i class="far fa-camera faa faa-shake-x"></i>
<i class="fas fa-camera faa faa-tada"></i>

B) On hover animations

Add faa-animation-name class to the icon and faa-parent class to any ancestor element. Hover over to start animation.

<div class="faa-parent">
    <i class="fas fa-camera faa-bounce"></i>
</div>

<div class="faa-parent">
    
    <!--ICON 1-->
    <div class="some-class">
        <i class="fas fa-camera faa-bounce"></i>
    </div>
    
    <!--ICON 2-->
    <i class="fas fa-angle-double-right faa-slide-right"></i>
 
</div>

Available animations:

faa-bounce
faa-burst
faa-falling
faa-flash
faa-flip-x
faa-flip-y
faa-float
faa-pulse
faa-ring
faa-rubber-band
faa-slide-left
faa-slide-right
faa-shake-x
faa-shake-y
faa-swing
faa-tada

Default Font Awesome animations fa-spin and fa-pulse.

Versioning

Font Awesome Animations will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: <major>.<minor>.<patch>

Changelog

For last releases see detailed CHANGELOG.

Team

Jakub Muda

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our CODE OF CONDUCT.

Copyright and license

Code released under the MIT License.

the-muda-organization / font-awesome-animations

Maintainers

Details