Configure custom emoji

Documentation Site Management
, ,
1

:bookmark: This guide explains how to configure custom emojis on your Discourse site.

:person_raising_hand: Required user level: Administrator

Configuring custom emojis

Want to change emojis for your Discourse site? Let’s take a look at how to configure custom emojis for your Discourse site, including selecting emoji sets, uploading new emojis, and adjusting emoji sizes.

Selecting an emoji set

Discourse comes with seven different emoji sets:

  • Apple/International style
  • Google style
  • Twitter style
  • Emoji One style
  • Win10 style
  • Google Classic
  • Facebook Messenger

Emoji Sets
Emoji Sets740×434 13.3 KB

You can select an emoji set:

  1. By running (or re-running) the setup wizard.
  2. Via site settings by searching for emoji to configure options like the maximum number of emojis in titles, minimum characters required for auto-completion, and enabling/disabling shortcuts and translations.

Adding custom emojis

To add custom emojis:

  1. Navigate to: Discourse Admin - Customize - Emoji.
  2. You can:
    • Enter a name and click Add New Emoji to upload a photo as an emoji.
    • Drag and drop up to 10 files into the Name field to bulk upload; filenames will be used as emoji names.

Adding Custom Emojis
Adding Custom Emojis740×434 13.3 KB

Resizing custom emojis

By default, all emojis are resized via CSS to 20x20, but this can be overridden with custom CSS. To maintain the correct aspect ratio and native size in posts, add the following CSS:

/* Make emojis normal size (don't force square) */
div.topic-post img.emoji[src*="uploads"], 
div.d-editor-preview img.emoji[src*="uploads"], 
div.emoji-modal img.emoji[src*="uploads"], 
div.d-editor-textarea-wrapper img.emoji[src*="uploads"], 
div.title-wrapper img.emoji[src*="uploads"], 
td.main-link img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

To customize a specific emoji’s size, use:

img.emoji[title=":youremoji:"] { 
    height: XXpx; 
    width: YYpx; 
}

For resizing emojis in chat messages and user status in chats:

div.chat-message-text img.emoji[src*="uploads"], 
span.user-status-message img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

Last edited by @JammyDodger 2024-08-21T13:36:55Z

Check documentPerform check on document:
28 Likes
30

I noticed that the custom emojis/smileys show 20x20 in chat messages and in the user status in chats. I solved it that way:

div.chat-message-text img.emoji[src*="uploads"] { /* Chat messages */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* User status in chat */
    width: auto;
    height: auto;
}

Would you do it that way, too? If yes, it might be useful to add it to this wiki post above. If not, I am happy to optimize my CSS code. :wink:

1 Like