Menu
Emoji
UI Docs
Getting Started New in 2.8
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
Advertisement Card Comment Feed Item Statistic
Modules
Accordion Calendar Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Slider Sticky Tab Toast Transition
Behaviors
API Form Validation Visibility

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

Emojis Definition

Emoji Set

An emoji set contains all Unicode 12.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 interferance 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

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

The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate

Dimmer Message
Dimmer sub-header