# The first emoji inside a title is not in the same "code" and is bigger

**URL:** https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626
**Category:** Development
**Created:** [August 2, 2023, 9:12am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626 "2023-08-02T09:12:59Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Decrypt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decrypt/32/317446_2.png) [@Decrypt](https://meta.discourse.org/u/Decrypt)
#### Post date: [August 2, 2023, 9:12am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/1 "2023-08-02T09:12:59Z")

</div>

Hello, 👋 I’m trying to dev my own theme, and I saw that when you write multiple emoji in a title, the first one will be inside an \< img \> instead of being with the rest of the text. Here are some screenshots (after some styling applied so it looks like it has the same size, without it the first emoji is bigger) : _**(screenshot at the end, sorry new account only allowed for 1 pic)**_

You can check my theme code here : [GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option. · GitHub](https://github.com/Decryptu/discourse-decrypt)

So I thought it was because the first character of a title was made bigger like in books, but its not the case as you can see, I placed a dot before the 3 emojis, and the first emoji was still different, I tried multiple styling (rem, px, align) so it is the same size as the two others, but on the mobile app it is still visible : _**(screen at the end)**_

Do you have an idea on how to solve this so the first emoji of a title will be the same as the others, on both mobile and desktop. 🤔

Thank you.

 ![screen](https://global.discourse-cdn.com/meta/original/4X/9/0/6/9061345c4dc05c839cf7917ba244d2bd67a6d4ec.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 9:33am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/2 "2023-08-02T09:33:41Z")

</div>

> [@Decrypt](#):
>
> I saw that when you write multiple emoji in a title, the first one will be inside an \< img \> instead of being with the rest of the text.

Hi, Decrypt 👋

Is that the case even in [safe mode](https://meta.discourse.org/t/53504?silent=true)?

Because on my instance, here’s the HTML code of my title:

![image](https://global.discourse-cdn.com/meta/original/4X/5/e/d/5edf8e77f9a2fcd45e1ecb4c3268e95527b7d9c1.png)

```html
<a href="/t/test-notif/161" class="fancy-title">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji"> Test notif
</a>

```

---

<div class="post-metadata">

### Author: ![Decrypt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decrypt/32/317446_2.png) [@Decrypt](https://meta.discourse.org/u/Decrypt)
#### Post date: [August 2, 2023, 9:52am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/3 "2023-08-02T09:52:24Z")

</div>

Hey ! I just tried and yes, take a look :

 ![Capture d’écran 2023-08-02 à 11.51.25](https://global.discourse-cdn.com/meta/original/4X/a/b/f/abf3a4eb5c19e3e7725702c676bc4b074da5baa1.jpeg)

(I checked every boxes when activating the [safe mode](https://meta.discourse.org/t/53504?silent=true))

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 9:59am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/4 "2023-08-02T09:59:03Z")

</div>

I notice your first emoji is a custom emoji you added to your site (it has an `emoji-custom` class), the others being Unicode.

I’m not sure why the Unicode emojis aren’t converted to `<img>` tags though they are in my test instance. I tried several sets, including Apple/International.

Can you share all your emoji-related settings?

---

<div class="post-metadata">

### Author: ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)
#### Post date: [August 2, 2023, 10:06am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/5 "2023-08-02T10:06:35Z")

</div>

I want to jump in here as well - as something with the emojis is weird on my site as well which might be related

i discovered that the bellhop bell is not tranformed into an image - but it stays as it is? - this affects only the title and the menu list. in addition, the emoji limit is set to 1 - so the title should actually not have a second emoji.

apart from that it would be sweet - to have the standard set of emojis in the category title - see that the party popper is different in the category title than in the other parts

ohh, on the admin site - all emoji setting are default.

 ![Bildschirmfoto 2023-08-02 um 12.02.06](https://global.discourse-cdn.com/meta/original/4X/1/9/c/19c011cf9aaa2a16fc91e609eaab3d721caf1cb8.png)

---

<div class="post-metadata">

### Author: ![Decrypt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decrypt/32/317446_2.png) [@Decrypt](https://meta.discourse.org/u/Decrypt)
#### Post date: [August 2, 2023, 10:16am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/6 "2023-08-02T10:16:14Z")

</div>

All the 3 emojis are the same, (from official ios/android list) I copy and paste the same character inside the title, and I even tried to copy the 3rd one, delete the others, paste it 2 times, and when I save the title it will still do this weird thing.

For the settings I don’t know what I can show you ? I do not have any “star” custom emote, only emotes I have are cryptocurrencies logo.

Here, I copied the raw title and I will paste it here : `⭐️⭐️⭐️ Une entité scrute la blockchain de Bitcoin?`

 ![Capture d’écran 2023-08-02 à 12.14.31](https://global.discourse-cdn.com/meta/original/4X/6/d/b/6db760ee8ca71043178dd8bd96c72b4780c6ff72.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 10:23am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/7 "2023-08-02T10:23:45Z")

</div>

Which emoji set do you use?

> [@Decrypt](#):
>
> For the settings I don’t know what I can show you ?

I’m navigating blindy as I have no clue why you encounter this behavior, but try `/admin/site_settings/category/all_results?filter=emoji`?

> [@anderer](#):
>
> the emoji limit is set to 1 - so the title should actually not have a second emoji.

No, it shouldn’t… Did you create this topic’s title manually or another way?

---

<div class="post-metadata">

### Author: ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)
#### Post date: [August 2, 2023, 10:28am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/8 "2023-08-02T10:28:02Z")

</div>

> [@Canapin](#):
>
> No, it shouldn’t… Did you create this topic’s title manually or another way?

 ![Bildschirmfoto 2023-08-02 um 12.26.50](https://global.discourse-cdn.com/meta/original/4X/8/1/3/8139e2a71d637c81cd3eb8dad73f23a8ed7b48a4.png)

- in the admin panel the default is 1 emoji
- the title/post was created manually

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 10:29am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/9 "2023-08-02T10:29:35Z")

</div>

When I try to repro:

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/e/c/7ec69ac654f08b74a47a453e09a1a00ac921d633.png)

🤔

Can you try to create a topic with more than 1 emoji on [try.discourse.org](http://try.discourse.org)?

---

<div class="post-metadata">

### Author: ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)
#### Post date: [August 2, 2023, 10:39am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/10 "2023-08-02T10:39:24Z")

</div>

![Bildschirmfoto 2023-08-02 um 12.37.31](https://global.discourse-cdn.com/meta/original/4X/c/6/f/c6f8ef3083b5546a0c89af96371d79c3019f36f1.png)

here on meta its the same - the bellhop is not transformed

 ![Bildschirmfoto 2023-08-02 um 12.44.02](https://global.discourse-cdn.com/meta/original/4X/d/7/4/d740b15b1a6d5301139f41e47839a86d03638843.png)

bell and boom are different - image and non-image

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 10:41am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/11 "2023-08-02T10:41:53Z")

</div>

The emoji on the preview panel is from your content, not your title, and will be converted as a Discourse emoji once the post has been processed and posted. Until then, it is normal that it appears as Unicode, as you probably entered it with your OS emoji selector.

---

<div class="post-metadata">

### Author: ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)
#### Post date: [August 2, 2023, 10:43am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/12 "2023-08-02T10:43:14Z")

</div>

> [@Canapin](#):
>
> The emoji on the preview panel is from your content,

yes, but the sidebar emoji is already there and “wrong”  
and see above the example from try.discourse

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 10:48am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/13 "2023-08-02T10:48:05Z")

</div>

Can you describe your steps, or better, record a video on how you put more than 1 emoji in a title?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 10:49am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/14 "2023-08-02T10:49:15Z")

</div>

@Decrypt, I think you should be able to have img for each one of your titles emojis by raising the `max emojis in title` setting value and then be able to customize them as you want with CSS.

---

<div class="post-metadata">

### Author: ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)
#### Post date: [August 2, 2023, 10:56am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/15 "2023-08-02T10:56:53Z")

</div>



---

<div class="post-metadata">

### Author: ![Decrypt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decrypt/32/317446_2.png) [@Decrypt](https://meta.discourse.org/u/Decrypt)
#### Post date: [August 2, 2023, 10:58am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/16 "2023-08-02T10:58:28Z")

</div>

Ok thank you, here is a screenshot of the settings :

 ![Capture d’écran 2023-08-02 à 12.39.29](https://global.discourse-cdn.com/meta/original/4X/b/7/3/b733235eb769d0bb1f69436e49370950d892564e.jpeg)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 11:08am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/17 "2023-08-02T11:08:58Z")

</div>

Did you already have 10 max emojis in title prior to your topic, or did you just raise it right now?

---

<div class="post-metadata">

### Author: ![Decrypt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decrypt/32/317446_2.png) [@Decrypt](https://meta.discourse.org/u/Decrypt)
#### Post date: [August 2, 2023, 11:13am UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/18 "2023-08-02T11:13:17Z")

</div>

Yes, it was the settings by “default” when I created the topic.  
Haven’t touch anything in the code/settings since my first post.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 2, 2023, 2:37pm UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/19 "2023-08-02T14:37:16Z")

</div>

i sort of reproduced this but the opposite (safari, iOS, desktop):

 ![IMG_0046](https://global.discourse-cdn.com/meta/original/4X/5/8/9/589a25eee9ddc26e965c9d70f880ab4fea981d47.jpeg)

there’s no issue if you use the Discourse emoji set.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 2, 2023, 3:14pm UTC](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626/20 "2023-08-02T15:14:51Z")

</div>

How do you write these emojis?

I write them as Unicode or `:star:` and it outputs ![image](https://global.discourse-cdn.com/meta/original/4X/7/9/e/79eb2d40558221601b7d683812ceb11881525204.png), all of them being `<img>`.

[Next page](https://meta.discourse.org/t/the-first-emoji-inside-a-title-is-not-in-the-same-code-and-is-bigger/273626.md?page=2)