--- title: Twitter Emoji Previewer tagline: search and select twitter emoji's description: Twitter Emoji Icons V1 Preview Page for J1 Template tags: [ Twitter, Emoji, Icons, Preview ] index: [] categories: [ pages, manuals ] permalink: /pages/protected/previewer/twitter_emoji/ regenerate: false scrollbar: true resources: [] resource_options: - attic: padding_top: 400 padding_bottom: 50 opacity: 0.5 slides: - url: /assets/images/pages/roundtrip/emojies-1920x1280-bw.jpg alt: Photo by Fausto García on Unsplash badge: type: unsplash author: Fausto García href: https://unsplash.com/@faustogarmen/portfolio --- // Enable the Liquid Preprocessor // ----------------------------------------------------------------------------- :page-liquid: // Set other global page attributes here // ----------------------------------------------------------------------------- // Liquid procedures // ----------------------------------------------------------------------------- {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%} // Initialize entry document paths // ----------------------------------------------------------------------------- {% include {{set_env_entry_document}} init_folders=all %} // Load tags and urls // ----------------------------------------------------------------------------- include::{includedir}/attributes.asciidoc[tag=tags] include::{includedir}/attributes.asciidoc[tag=urls] include::{includedir}/attributes.asciidoc[tag=data] // Additional Asciidoc page attributes goes here // ----------------------------------------------------------------------------- :jollygoodcode-emoji: https://github.com/jollygoodcode/twemoji // Include documents // ----------------------------------------------------------------------------- == 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 <>. To find the icon you need, to fasten your search the Emoji Library is sorted by five categories: * people, classic Emoji's like emoji:smile[] (`smile`) and emoji:laughing[] (`laughing`) or faces like emoji:girl[] (`girl`) * nature, like emoji:mouse[] (`mouse`), emoji:rose[] (`rose`) or emoji:sunny[] (`sunny`) * objects, like emoji:bell[] (`bell`), emoji:hammer[] (`hammer`) or emoji:notes[] (`notes`) * places, like emoji:office[] (`office`), emoji:car[] (`car`) or flags like emoji:de[] (`de`) * symbols, like emoji:ok[] (`ok`), emoji:clock12[] (`clock12`) or emoji:scorpius[] (`scorpius`) === Asciidoc Markup Using Twitter Emoji's for your Asciidoc documents is quite simple - use the `emoji:` inline macro like this: [source, adoc, role="noclip"] ---- 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] ! ---- [.result] ==== You're faster than a emoji:turtle[2x] - for sure emoji:heart[pulsed] ! ==== Writing complex Asciidoc Macros for documents are not fun. For the `emoji:` inline macro the name of the Emoji is need. Go for the <> 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`. include::{tabledir}/twitter_emoji/100_bs_sizes.asciidoc[] ==== 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. include::{tabledir}/twitter_emoji/100_relative_sizes.asciidoc[] === 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. NOTE: Using `flip-*` and `rotate-*` at the *same* time is *not* supported include::{tabledir}/twitter_emoji/200_rotate.asciidoc[] === Flip Like `rotate`, an icon can be flipped by horizontal and vertical *axes*. It is similiar to `rotate` but the *angle* (perspective) remains *unchanged*. include::{tabledir}/twitter_emoji/300_flip.asciidoc[] === 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. include::{tabledir}/twitter_emoji/400_spin_pulsed.asciidoc[] [NOTE, role="mb-5"] ==== 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 emoji:stuck-out-tongue-winking-eye[]). If gets too much, a click on the `Clear` button cleans up the text-field. Simple like that! ++++
++++