Custom emoji size?

Product Support

AI-generated summary

Custom Emoji Size Discussion Summary

bekircem is seeking help to enlarge custom emoji size on their Discourse system. zogstrip suggests adding img.emoji { width: 25px; height: 25px; } to the CSS customization. However, bekircem reports that the solution doesn’t work.

After troubleshooting, zogstrip asks if the customization is enabled, and bekircem confirms it is. zogstrip then suggests refreshing the page and clearing the browser cache, but bekircem reports that this doesn’t resolve the issue.

zogstrip provides a revised solution, body img.emoji { width: 25px; height: 25px; }, which bekircem confirms works.

bekircem then asks about grouping custom emojis and setting custom sizes for different emojis. zogstrip responds that there is no way to group custom emojis, but custom sizes can be set using the title attribute, e.g., .emoji[title=":over_9000:"] { width: 9001px; height: 9001px; }.

1

Hi,

I added custom emoji set on my Discourse system. But emoji size seems small, how i enlarge this a little bit?

2

I would add the following customization

img.emoji {
  width: 25px;
  height: 25px;
}
3

Thank you @zogstrip It’s a good idea. :smile: I added this code on CSS tab but nothing change. What did I do wrong? :frowning:

4

Did you enable the customization?

5

Yes, i think? (Screenshot)

6

Have you tried refreshing the page and/or clearing your browser’s cache?

7

Yes, i tried hard refreshing (SHIFT + F5) on Google Chrome.

8

My bad. You actually need to be more specific. Try with

body img.emoji {
  width: 25px;
  height: 25px;
}

Note: 100x100 emoji is going to be HUGE.

9

It works now! Thank you. :slight_smile:

I know, 100x100 is huge. I set this value for just tried. :smile:

I must use Discourse emoji system more advanced. How i group custom emojies? I have too much custom emoji. Another question: Am i set custom size for different emoji?

10

There’s no way to group custom emojii.

If you want to set a custom size, you’ll have to match the “title” attribute with something like

.emoji[title=":over_9000:"] {
  width: 9001px;
  height: 9001px;
}
11

Thank you zostrip. :grinning: