search

iamcal / emoji-data

Easy to parse data and spritesheets for emoji
MIT License
2.57k stars 306 forks source link

How to use it #141

Closed ZackRong closed 5 years ago

ZackRong commented 6 years ago

where are the demos show how to use it ?

jcubic commented 6 years ago

You can take a look at my Emoji in Terminal

lazamar commented 5 years ago

How to use the sprites

You create an html element with the sprites sheet as background, set its size to be very big, then move it around to show only the emoji you want.

Emojis have a sheet_x and sheet_y property, which show its row and column position in the sprite sheet.

Currently the sprite sheet has 52 rows and 52 columns. If we say that each emoji should measure 100% of our html element's size, we can set the background to 5200% 5200%.

Here is how we would show the grinning emoji, which is at position x = 30, y = 24:

.grinning {
    background: url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheet_google_32.png);
    background-size: 5200% 5200%;
    background-position: calc(30 * 100%/51) calc(24 * 100%/51);
}