🌈 Twemoji Astonishing 😲

Like Font-Awesome, but for Twitter Emojis - and this time, it's astonishing! 😄

Modern drop-in replacement for projects like Twemoji-Amazing, with some quality-of-life improvements:

• Easy support for fallback text emojis
• Literal emojis as CSS class names, in addition to text names

Usage

CSS Variants

You can get your preferred variant of the CSS file for use in your webpages:

• twemoji-astonishing: The full package with all the features
• twemoji-astonishing.chars: Only literal emojis used as class names
• twemoji-astonishing.names: Only ASCII names used as class names, like Twemoji-Amazing

Every variant, of course, has both a pure (.css) version, and a minified (.min.css) one.

Getting the Files

For getting the files and using them, you can choose between:

• Hotlinking to the latest file hosted on the Pages branch of the repo:

  • Directly: https://octtspacc.gitlab.io/twemoji-astonishing/maxcdn/<VARIANT>.css
  • (Better) Using a CDN like jsDelivr: https://cdn.jsdelivr.net/gh/octospacc/twemoji-astonishing@gh-pages/<VARIANT>.css

• Downloading a prebuilt archive containing all the CSS and SVG files, which you can host on your own server:

  • See file listing here (GitLab), or here (GitHub); archives are in the "Archives" directory.

Using the CSS Classes

Just assign the base class (twa), an emoji class, and optionally any option class to a new inline element.

Size Option Classes

Like for Font-Awesome and Twemoji-Amazing, the following classes can be used to alter emoji sizes:
twa-lg, twa-2x, twa-3x, twa-4x, twa-5x.

Emoji classes

Emoji classes can be used in one of 2 forms.

First, an emoji class can be the standard form twa-emoji-name; essentially, the ASCII name of the emoji, prefixed by twa-.
Example:

<span class="twa twa-astonished-face"></span>

You can also (additionally, or exclusively) use literal emojis (always prefixed by twa-) as class names. Example:

<span class="twa twa-🗿"></span>

Any text inside elements with the twa class will be properly hidden via CSS.
This means that you are free to write text inside those HTML tags - including emoji characters, that will act as a fallback on unsupported platforms (very old browsers), while also allowing emojis to be copied with other text when that gets selected. In fact, you should do this.
Example:

<span class="twa twa-exploding-head">🤯</span>

Finding emojis

• You can look for emoji names, codes, and characters at Emoji List by the Unicode Consortium. The names you get from the table correspond to the CSS class names if you remove letter accents, remove special characters, and replace spaces with dashes.

• Emojipedia is also a great resource for finding emoji information - the above, but also much more. For each emoji on the site, the URL names correspond to the CSS class names.

Building

Running ./Tools/BuildCSS.py generates all final CSS files. (Requires Python >= 3.9).

./Tools/DeployPages.sh also does other tasks, like downloading a fresh copy of Twemoji SVG files and creating archives.

Credits and Licenses

License for Twemoji-Astonishing scripts, snippets, and documentation: MIT.

Uses CSS snippets from Twemoji-Amazing, licensed under MIT.

The project exists solely on top of Twemoji. Their graphics are licensed under CC BY 4.0. Please adhere to the Twemoji attribution requirements when using these emojis.

The included tools for building the CSS files scrape the latest version of the emoji-test.txt list from the Unicode Consortium. See that for copyright and licensing.