Emoji
Component
Emoji
, known as e (絵, “picture”) + moji (文字, “character”) from Japanese
Kanji is a key feature for web content. With emoji supports, a lot of icons
can be replaced easily. Bissetii does support Emoji
seemlessly with an
optional enabling trigger.
This component is available starting from v1.11.0
.
Sass Styling Parts
Sass styling parts varies depending on the version you use.
Version v1.13.0
and above
Starting from version v1.13.0
, emoji is no longer depending on any Sass.
The default emoji font inclusion is called emoji
.
This is mainly due to the code and data shift to the HTML inline CSS inclusion in case of alterations.
Version v1.12.5
and before
The Sass scripts responsible for styling emoji are located at:
assets/css/bissetii/modules/emoji/*
Bissetii is currently using external emoji font graphics like
Noto Color Emoji
for page rendering.
Enabling Emoji
To enable emoji, you need to supply the type of emoji styling using its Bissetii
emoji code name. To disable emoji completely, simply supply false
as falue.
The config is:
$config-emoji: code-name
Custom Sourcing URL Paths
Bissetii also supply optional local URL and remote URL sourcing path. If URLs
are specified, it will overrides the default URL. To disable them and use the
default URLs, simply supply an empty array ([]
). The configs are:
$config-emoji-local-url: [ "font/myEmojiFile.tff" ]
$config-emoji-remote-url: [ "site.com/emoji.tff", "site.com/emoji.woff" ]
Custom Font
To supply custom font of your own, simply supply the codename as:
$config-emoji: custom-emoji
You MUST specify both local and remote URLs for sourcing the font files. Otherwise, the compiler returns an error.
Noto Color Emoji
Noto Color Emoji is the Noto font family emoji. The graphics font is available at its Github repository. To enable this font, simple supply the codename as:
$config-emoji: noto-color-emoji
By default, this font sources the font file from the following locations:
Local URL : fonts/NotoColorEmoji.tff
Remote URL: https://gitcdn.xyz/repo/googlefonts/noto-emoji/master/fonts/NotoColorEmoji.ttf
Javascript Parts
This component does not depend on any Javascript.
HTML Parts
There are multiple aspects you need to manage for HTML part.
Import Emoji Font
Starting from version v1.13.0
, you need import your emoji font using inline
styling (<style>
).
This applies to AMP output format where you compress the codes together
into your <style amp-custom>
.
The CSS is hard-coded to use the name emoji
. Hence, you just need to
specify the source URL list using the @font-face
attribute . Here is an
example:
|
|
Creating Emoji
There are many ways to create emoji. There are minimum 3 ways to do it:
- By shortcode (HIGHLY RECOMMENDED)
- By HTML Encoded UTF-8
- By UTF-8 Symbols directly
You may refers to the
Emoji Cheat Sheet or
Emoji Manual for some
guidance. Bissetii currently renders Emoji
as follows:
Emoji | Unicode | By Shortcode | By HTML UTF-8 | By Symbol | Render (Shortcode) | Render (HTML UTF-8) | Render (Symbol) |
---|---|---|---|---|---|---|---|
Grinning | U+1F600 | :grinning: | 😀 | 😀 | 😀 | 😀 | 😀 |
Check Mark Button | U+2705 | :white_check_mark: | ✅ | ✅ | ✅ | ✅ | ✅ |
Cross Mark | U+274C | :x: | ❌ | ❌ | ❌ | ❌ | ❌ |
Woman Rising Hand | U+1F64B U+200D U+2640 U+FE0F | :woman_raising_hand: | 🙋♀️ | 🙋♀️ | 🙋♀️ | 🙋♀️ | 🙋♀️ |
Man Rising Hand | U+1F64B U+200D U+2642 U+FE0F | :man_raising_hand: | 🙋♂️ | 🙋♂️ | 🙋♂️ | 🙋♂️ | 🙋♂️ |