Font Wonderful Emoticons v 0.9

Font-based CSS emoticons set

Do you like Font Awesome Icons? You gotta love Font Wonderful Emoticons!

• Free
• Lightweight
• Easy to use
• Reach collection of font-based css emoticons

Installation

<link rel="stylesheet" type="text/css" media="all" href="https://cdn.staticaly.com/gh/DamianoPantani/fw-emoticons/v0.9/dist/fw_emoticons.css">

You can also download the repo, and just link fw_emoticons.css in your HTML.

Usage

<ANY class="fw EMO_TYPE EMO_NAME"></ANY>

EMO_TYPEs of the current version:

• no type specified - Default font
• fw-o - Default font outlined
• fw-s - Sketchy font
• fw-f - Today I Feel font
• fw-m - Memes font

Examples:

<i class="fw perky"></i>
<i class="fw fw-o perky"></i>
<span class="fw fw-s pain"></span>

The most common attributes you may want to customize are:

transform: scaleX(-1);                  /* Flip horizontally */
text-shadow: 0 0 1px rgba(0,0,0,0.15);  /* make 'em smooth! */
vertical-align: middle;
font-size: 22px;
color: red;

JSFiddle Demo

All Icons List

• NOTE 1. This component was made for author's personal purposes only. It may contain lots of gaps or not fit on your page as expected. Ping me in case of doubt, details below.
• NOTE 2. All fonts families weights half a MB in total, but don't worry. Each one is downloaded in the moment of first reference, so if you use one only, it will be transfered exclusively.

Animations

Animations are perfect supplementation for this component. It's nicely working with Animate.css framework, but you can also use out of the box ones:

• fw-shake
• fw-spin
• fw-rotate
• fw-updown
• fw-bounce

Instead of modifying css sheet to your needs you can add these classes respectively:

• Duration: fw-100ms, fw-200ms ... fw-3000ms
• Delay:fw-d1s, fw-d2s ... fw-d10s
• Iteration count: fw-rep-1, fw-rep-2 ... fw-rep-10
• Direction: fw-reverse

Animations Demo

On-the-fly emoticons replacement

To replace existing smileys in your page (e.q. :), :-(, :D) with fw-emoticons, link this js:

<script src="https://cdn.staticaly.com/gh/DamianoPantani/fw-emoticons/v0.9/dist/fw_emoticons.js"></script>

Then invoke new Emoticons().replace() function. Example:

new Emoticons().replace({
    selector: '.comments, .about-me > .text',   // REQUIRED. CSS rule where to look for smileys
    mainClass: 'fw-o',                          // OPTIONAL. Type of emoticons
    emoTag: 'i',                                // OPTIONAL. HTML tag of emoticons
    emoMap: {                                   // OPTIONAL. Modify default mappings. Values can be either strings or string arrays
        'smile': ':)',
        'happy': ':D',
        'sad': [':(', ';(', ':sad:']
    }
});

DEFAULT EMOTICONS MAPPINGS

• NOTE 1. If you want to replace emoticons multiple times, for better performance get an Emoticons instance and use it all over the scope, e.g:

var emoticons = new Emoticons({'happy': ':D'}); // If you want to modify default mapping - for even better performance pass it once in constructor.
emoticons.replace({selector: '.aDiv'});
emoticons.replace({selector: '.bDiv'});

• NOTE 2. Do NOT use nested selectors, e.g. .comment, .comment p. It may skip child blocks and cause a slight performance drop in extreme cases. Instead, in this example run the replace function twice, or wrap existing text from .comment block in any html tag.

License

FW-Emoticons is a Freeware component, but it uses third-party font faces. Please refer to the section below for more license details.

Credits

• Emoticons font (default and outlined): George Edward Purdy (purdydesign.com) Free for personal use
• Sketchy font: David Kerkhoff (hanodedfonts.com) Donationware
• Today I Feel font: Kimberly Geswein (kimberlygeswein.com) Free for personal use
• Far.Chehre (Meme) font: Abolfazl Seilsepour (seilsepour.ir) 100% Free

Contact

Any considerations? Problems? Upgrade ideas? Please raise an issue. Thank you!