Generating Flat Style Icons with jQuery and CSS3 - Flatify

Flatify is a lightweight jQuery plugin which allows to generate flat long shadow icons from any glyph and iconic fonts like Font Awesome, Material Design Icons, etc.

See also:

• jQuery Plugin For Flat Long Shadows Generator - Dynamic Shadow Color
• jQuery Plugin For Flat UI Elements With Long Shadows - Flat Shadow

How to use it:

1. Include an iconic font of you choice on the web page.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Add an icon to your web page.

<i id="twitter" class="fa fa-twitter"></i>

3. Include jQuery library and the jQuery Flatify plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="flatify.js"></script>

4. The JavaScript to generate a flat styled icon.

$('#twitter').flatify({
  'r':101, // red
  'g':159, // green
  'b':203 // blue
});

5. The JavaScript to generate a flat long shadow styled icon.

$('#twitter').flatify({
  'r':101, // red
  'g':159, // green
  'b':203, // blue
  's':35, // number of shadows for the icon text
  'a':0.7, // opacity for the icon text shadow
});

6. More configuration options.

$('#twitter').flatify({
  'r':101, // red
  'g':159, // green
  'b':203, // blue
  's':35, // number of shadows for the icon text
  'a':0.7, // opacity for the icon text shadow
  'f':80, // font size
  'w':150, // width for the icon
  'c':0 // percentage of rounded for icon border
});

---

This awesome jQuery plugin is developed by n3x0. For more Advanced Usages, please check the demo page or visit the official website.