# Emoji One PNG Sprites

🍒 :) :coffee: :( :fire: 🍔

We've setup a spritesheet for people to use. These sprites are resizeable up to 64x64 pixels, (at which point they will begin to stretch).

### Some Considerations

- background-size is not supported in IE8, which these resizeable sprites rely on.
- Depending on the amount of emoji you're actually using on a page, loading an entire spritesheet here could be overkill.

### 1. Attach Sprite CSS Stylesheet:

To get PNG sprites working you first need to link the Sprites stylesheet in your <head>. This file is available in our git repo under /assets/sprites. Make sure to include the accompanying emojione.sprites.png file in the same directory, or update its path in the css file if you move it.

    <link rel="stylesheet" href="path/to/emojione.sprites.css"/>

### 2. Enable PNG Sprite mode

Once the stylesheet is attached, it's just a matter of enabling PNG Sprites in your Emoji One configuration

Javascript Example

    emojione.imageType = 'png';
    emojione.sprites = true;

PHP Example

    $client = new Client(new Ruleset());
    $client->imageType = 'png';
    $client->sprites = true;

If you are not using our conversion scripts, PNG sprites can be implemented using the following markup structure. In this example we're using the unicode symbol 1F433 aka 🐳

    <span class="emojione-1F433">
      &#x1f433;
    </span>