JoyPixels PNG Sprites
🍒 🙂 ☕ 😞 🔥 🍔
We've setup a collection of spritesheets for people to use. These sprites are split by category (plus diversity) and come in 32px and 64px sizes.
Some Considerations
- zoom or transform: scale() can be used for custom scaling. transform: scale() is more widely supported.
- 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 joypixels.sprites.png file in the same directory, or update its path in the css file if you move it.
1 | <link rel="stylesheet" href="path/to/joypixels.sprites.css"/> |
2. Enable PNG Sprite mode
Once the stylesheet is attached, it's just a matter of enabling PNG Sprites in your JoyPixels configuration
Javascript Example
1 2 | joypixels.imageType = 'png';joypixels.sprites = true; |
PHP Example
1 2 3 | $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 🐳
1 2 3 | <span class="joypixels joypixels-32-nature _1f433"> 🐳</span> |