Skip to content
Library for adding a drawing animation to Font Awesome 5 icons
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
dist
examples
src
.gitignore
LICENSE
README.md
package.json

README.md

Font Animate

Library for adding a drawing animation to Font Awesome 5 icons.

Font Animate Preview

Quick start

Several quick start options are available:

  • Download the latest release.
  • Clone the repo: git clone https://github.com/innovato/fontanimate.git
  • Install with npm: npm install fontanimate
  • Install with yarn: yarn add fontanimate

Usage

Add the dependencies to your HTML:

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Add some Font Awesome Icons (note the font-animate class):

<i class="fab fa-500px font-animate"></i>
<i class="fab fa-apple font-animate"></i>

Initiate Font Animate:

$(document).ready(function () {
  $('.font-animate').fontAnimate();
});

Done!

Options

The plugin options are divided in two parts:

  • Font Animate options
  • Vivus options (dependency for SVG animation)

Font Animate options

Name Type Description
stroke string Stroke color. E.g. red, #000, #00FF00, [Default: currentColor (inherits color)]
fill string Fill color. E.g. red, #000, #00FF00, [Default: transparent]
strokeWidth integer Stroke width. [Default: 1]
callback function Callback at the end of the animation. [Default: (obj) => {}]

Vivus options

Refer to Vivus for animation specific options. All Vivus options are available for use in this library.

Example with mixed Font Animate/Vivus options

$(document).ready(function () {
  $('.font-animate').fontAnimate({
    stroke: 'red',
    duration: 500 // Vivus specific animation option
  });
});

Options through HTML attributes

It is possible to override the initial options through HTML attributes:

<i data-stroke="red" data-stroke-width="5" data-fill="green" data-duration="1000" class="fab fa-apple font-animate"></i>

Credits

A big thanks to:

Copyright and license

Code and documentation copyright 2018 Innovato. Code released under the MIT License.

You can’t perform that action at this time.