Jekyll One

Emoji Icons

select twitter emojis

Twitter Emoji’s

J1 Template comes with the Twitter Emoji library (Twemoji) V1 included and offers more than 800+ icons. A lot of icons - hard to remember all the names, isn’t it?

To use all the Emoji’s with your documents you don’t need to remember any name. Simply pick the icon you want - use the Emoji Picker.

To find the icon you need, to fasten your search the Emoji Library is sorted by five categories:

  • people, classic Emoji’s like (smile) and (laughing) or faces like (girl)

  • nature, like (mouse), (rose) or (sunny)

  • objects, like (bell), (hammer) or (notes)

  • places, like (office), (car) or flags like (de)

  • symbols, like (ok), (clock12) or (scorpius)

Asciidoc Markup

Using Twitter Emoji’s for your Asciidoc documents is quite simple - use the emoji: inline macro like this:

Your text emoji:icon_name[] ...
Your text emoji:icon_name[size, modifier] ...

For all Emoji’s (icon_name), two parameters can be given for the size and a modifier to put additional features on the icon. See the following chapters for all sizes and modifiers (rotate, spin, flip and pulsed) available.

If none if the additional parameters are specified, the size is set to 1x and no modifier is used for an Emoji.

Click on view result to see the nice turtle …​
You're faster than a emoji:turtle[2x] - for sure emoji:heart[pulsed]!

You’re faster than a - for sure !

Writing complex Asciidoc Macros for documents are not fun. For the emoji: inline macro the name of the Emoji is need. Go for the Emoji Picker and you’re done in seconds.

Sizes

For more eye-minded placement, or to place emphasis on, all Emoji’s can be specified in different sizes by the optional parameter size. See with the following what sizes are available.

BS grid Size

For a better Bootstrap integration, the icon size can be given like the view-port shortcuts xs, sm, md, lg and xl.

Table 1. Bootstrap (BS) grid sizes
Class Result Code

xs

emoji:heart[xs]

sm

emoji:heart[sm]

md

emoji:heart[md]

lg

emoji:heart[lg]

xl

emoji:heart[xl]

Relative Size

All icons can be specifier relativ to the base size of 1em from 1x to 5x. See the examples with the table below.

Table 2. Relative sizes
Class Result Code

1x

emoji:heart[1x]

2x

emoji:heart[2x]

3x

emoji:heart[3x]

4x

emoji:heart[4x]

5x

emoji:heart[5x]

Rotate

To vary Emoji’s in their orientation, the icons can be rotated for 7 different angle. This is quite useful, if an Emoji has an orientation already but does not fit your need.

Using flip- and rotate- at the same time is not supported
Table 3. Rotate icons
Class Result Code

no

emoji:syringe[2x]

rotate-45

emoji:syringe[2x, rotate-45]

rotate-90

emoji:syringe[2x, rotate-90]

rotate-135

emoji:syringe[2x, rotate-135]

rotate-180

emoji:syringe[2x, rotate-180]

rotate-225

emoji:syringe[2x, rotate-225]

rotate-270

emoji:syringe[2x, rotate-270]

rotate-315

emoji:syringe[2x, rotate-315]

Flip

Like rotate, an icon can be flipped by horizontal and vertical axes. It is similiar to rotate but the angle (perspective) remains unchanged.

Table 4. Flip icons
Class Result Code

no

emoji:loudspeaker[2x]

flip-h

emoji:loudspeaker[2x, flip-h]

flip-v

emoji:loudspeaker[2x, flip-v]

Spin and Pulsed

For realy eye-minded placements of Emoji’s, icons can be animated im terms of rotation and pulse. Be careful using animated Emoji’s, because this may cause disturbing effects and can demand unwanted attention.

Table 5. Animate icons
Class Result Code

no

emoji:eight-pointed-black-star[2x]

spin

emoji:eight-pointed-black-star[2x, spin]

pulsed

emoji:heart[2x, pulsed]

Animations gets stopped if the mouse (pointer) is moved over an animated Emoji.

Emoji Picker

The Picker for Emoji’s is easy to use. Open the category view by a click on the button Picker and click on an emoji you want to use. Automatically, the Asciidoc code is copied to the clipboard. You can paste the code directly from the clipboard to the document your’re currently work on.

For your reference, all Emoji’s selected are copied into to text-field of the picker (and the Asciidoc code as well ). If gets too much, a click on the Clear button cleans up the text-field.

Simple like that!

dummy-text