Menu
Emoji
UI Docs
Getting Started New in 2.9
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Emoji Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Text
Collections
Breadcrumb Form Grid Menu Message Table
Views
Ad Card Comment Feed Item Statistic
Modules
Accordion Calendar Checkbox Dimmer Dropdown Embed Flyout Modal Nag Popup Progress Rating Search Shape Sidebar Slider Sticky Tab Toast Transition
Behaviors
API Form Validation State Visibility

Emoji
An emoji is a glyph used to represent an emotional state

Emojis Definition

Emoji Set

An emoji set contains all Unicode 15.1 Emoji Characters

Emojis serve a very similar function to text in a page. In Fomantic emojis receive a special tag <em> which allow for an abbreviated markup when sitting along-side text.
Because of the complexity and possible interference with existing fomantic classnames, emoji names have to be provided via the data-emoji attribute instead of usual classnaming.
By default all emoji images are linked to a CDN and are not part of Fomantic itself. If needed, you might download your personal icon set from the respective websites respecting their individual licenses, host it locally and change the @emojiPath in emoji.variables of the theme you are using.
If you use Fomantic in a commercial or business project or want to host the emoji assets locally and also want to use the alternative joypixels set, you may require an additional license for your project depending of the usage.
You will find joypixels licenses at https://www.joypixels.com/licenses
You can reduce your custom generated CSS by adjusting the @emoji-map variable in your themes emoji.variables file to only the emojis you need.

General

You can provide the emoji shortname with or without colons

I Fomantic-UI I Fomantic-UI

States

Disabled

An emoji can show that it is disabled

Loading

An emoji can be used as a simple loader

Variations

Size

An emoji can vary in size

Small
Medium
Large
Big

Autosizing

If no specific size class is given, all emojis are automatically sized according to the current element font-size

Within a header
Within a button


Within a label


Within a text

Link

An emoji can be formatted as a link

Dimmer Message
Dimmer sub-header