Cannot display emoji ✔️, 🙋‍♂️

[yzhang-gh]

Steps to Reproduce:

1. Open a new file
2. Copy these two emoji ✔️❌ to it
3. See this result

Expected

on Windows 10

---

2022.12: Edited to add a workaround:

Workaround. Append a color emoji font to the editor font family e.g.:

• Windows: Consolas, 'Courier New', monospace, 'Segoe UI Emoji'
• MacOS: Menlo, Monaco, 'Courier New', monospace, 'Apple Color Emoji'
• Linux: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'

e.g. on macOS

• "editor.fontFamily": "Roboto Mono, 'Apple Color Emoji'",

or for a cross-platform solution:

• "editor.fontFamily": "Consolas, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji'"

[rebornix]

The style is decided by the browser and since we are using Chromium under the hood, it's Google's Emoji.

[rianadon]

This may not be how it really works, but from my understanding this is how Windows displays emoji as a fallback when no specific "emoji font" is used.

This can be fixed by adding 'Segoe UI Emoji' to the end of the editor.fontFamily setting so emojis fall back to the correct, colored font. Or you could use 'Segoe UI Symbol' instead to get monochrome emoji.

Thus, building off the default setting, Consolas, 'Courier New', monospace, 'Segoe UI Emoji' would give you colored emoji. This should really be the default. But for now you could change this yourself to make the emoji display correctly.

[yzhang-gh]

@rianadon many thanks!

[rianadon]

@alexandrudima I wouldn't call this an issue with something upstream since there is a solution to solve this in Electron/Chromium - add all the emoji fonts to the font stack. For example GitHub uses the emoji fonts for both macOS and Windows in their CSS (along with the native system fonts): -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol".

The fix to this would be to edit the default by appending Segoe UI Emoji and possibly the Apple emoji font too.

[yzhang-gh]

Another emoji:
🙋‍♂️ (man raising hand)
in vscode
expected (as shown on GitHub webpage)

with font settings Consolas, 'Microsoft Yahei', 'Segoe UI emoji', 'Segoe UI Symbol'
on Windows 10 Pro 1709

[rianadon]

I see this too. The issue goes away when I change the font to only 'Segoe UI Emoji', which likely handles the zero width joiner.

This probably isn't going to have an easy fix, as while putting the emoji font first fixes the problem, it doesn't allow for the customization of the text font (as the emoji font seems to have glyphs for text). One solution would be to do as GitHub does and enclose emoji inside a separate element with its own font-family, but doing so would require a change in Monaco's syntax highlighting.

[sylann]

When I paste this emoji: 👈, in any file in vscode (on ubuntu), I get this :

It's the same in the integrated terminal of vscode;

While it is properly displayed in my terminal (tilix).

[rianadon]

@SylannBin good find! Would you happen to know what font tilix is using?

Also what happens if you add 'Noto Color Emoji' to the start or end of your editor.fontFamily setting (with the single quotes)? It seems like this is the emoji font Ubuntu uses but I'm not completely sure.

[sylann]

@rianadon Adding the 'Noto Color Emoji' font family makes the above emoji properly displayed both in the editor and the integrated terminal.
But without surprise, it also affects all other characters.
For example, numbers and stars are showed in a peculiar white fashion:

However if I put the font at the end of the list, it works perfectly.

Apparently, the ability to print the emojis properly in tilix is not related to Tilix itlsef but to the version of GTK that is being used. Color emojis work in ubuntu 18.04 but not in 17.10, it appears it has been added with gtk 3.22. source I've searched a bit, in the gtk repo, it seems the feature was handled by cairo for several years already, and was fixed very recently in gtk, but this is quite obscure to me right now and I couldn't figure out which commits introduced the fix.

[rianadon]

Great to hear it works if you put the font at the end!
I've never seen an emoji font handle stars and numbers specially before though.

Also, I'm probably going to submit a PR soon to change the default font-family to include emoji. For my later reference (and anyone looking to make emoji work on their system), these defaults would be:

• Windows: Consolas, 'Courier New', monospace, 'Segoe UI Emoji'
• MacOS: Menlo, Monaco, 'Courier New', monospace, 'Apple Color Emoji'
• Linux: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'

[NatoBoram]

I confirm that this worked for me on Ubuntu.

"editor.fontFamily": "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'"

[matthijsgroen]

In my case, i type 🎉 :tada but display like

that make me almost crazy!!! 😞

OS: MacOS

I have the same in windows...

[q1b]

same here

[HaloWang]

Hi, guys. I think fontFamily need to be noticed:
Iosevka + Source Han Sans, monospace is broken by some emojis:

Some fallback:

Default:

Windows:

[j1mmie]

On MacOs, "Menlo" is actually breaking some emojis for me. I've installed the free Robot font from Google:

https://fonts.google.com/specimen/Roboto+Mono

and changed my editor.fontFamily to:

"editor.fontFamily": "'Roboto Mono', 'Apple Color Emoji'"

And it's a pretty acceptable alternative.

[DYW972]

2022 thanks to @alexdima !
I solved this issue on my macOS by removing Menlo in editor.fontFamily": "Monaco, 'Courier New', monospace",

Now everything works like expected.

🙌

[DG9Jww]

In my case, i type 🎉 :tada but display like

that make me almost crazy!!! 😞

OS: MacOS

same here in windows😖

[Jafetlch]

I have the same problem on Windows 10

[kartinul]

Same here

[pohy]

I have the same issue on Windows 10 using the Windows Emoji keyboard.
But! The same emojis render correctly when inserted through the Emoji Snippets extension.

[kartinul]

For me this problem was related with the vim extension,

[divyamrit]

Might you be right, I have my vim extension also enabled. Showing the same results never tried toggling it, let might this is an issue with the vim extension

[kartinul]

here is the issue that was opened in VsCodeVim/Vim github
VSCodeVim/Vim#7547

[odebroqueville]

I'm using VS Code Version: 1.70.0 (Universal)
Commit: da76f93
Date: 2022-08-04T04:38:55.829Z
Electron: 18.3.5
Chromium: 100.0.4896.160
Node.js: 16.13.2
V8: 10.0.139.17-electron.0
OS: Darwin x64 21.6.0

I'm neither using the Menlo font family nor Vim and some emojis appear in b&w instead of colour such as :red_heart:

Running the following Python script:

import emoji
print(emoji.emojize('Python is :thumbs_up:'))
print(emoji.emojize("I :red_heart: Python", variant="emoji_type"))
print(emoji.emojize("Python is fun :softball:", variant="emoji_type"))

Renders:

VS Code font family settings:

{
  "editor.fontLigatures": "'calt', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": "'Source Code Pro', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.accessibilitySupport": "off",
  "editor.fontSize": 15,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.inheritEnv": false,
  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "workbench.editor.enablePreview": false,
  "terminal.integrated.localEchoStyle": "dim",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontWeight": "normal"
}

[11xxx22]

@alexdima теперь это работает и в intellisense?

✅

[amir-khoshbakht]

It is easy to understand what emojis vsCode can show:
emoji list website

All the emojis that are shown in color on this page are also shown in color in vsCode

example of uncolored emoji:

and the same exact emoji in my vsCode:

[Ali-Jahankah]

I'm using emojis in my vs code integrated terminal and you can add these settings to your settings.json file to see the emojis

"terminal.integrated.cursorStyle": "line",
"terminal.integrated.cursorWidth": 4,
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.fontSize": 12,
"terminal.integrated.fontFamily": "monospace",
"terminal.integrated.letterSpacing": 1,
"terminal.integrated.lineHeight": 1,

[mpacary]

Ubuntu 22.04 / Gnome here ; recommended option 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji' did not work (e.g. "⚠️" was displayed b&w), as well as the cross platform one.

After trying various combinations, this one worked:

'Courier New', 'Noto Color Emoji'

Poke @yzhang-gh if you wish to update the top message 😉

[redactedscribe]

The information emoji (ℹ️) also doesn't display as expected (i.e. coloured):

[felixhaeberle]

ℹ ✅ Using inlang config file at /Users/felixhaberle/Desktop/git/inlang/source-code/sdk-js/src/adapter-sveltekit/examples/test-app/inlang.config.js
ℹ 🌏 Found 3 languages with a total of 6 messages.                                                                                        
ℹ 📝 Translating to 2 languages. [de, es]                                                                                               
ℹ 🇪🇸 Translated message welcome to Bienvenido a inlang                                                                                    
ℹ 🇪🇸 Translated message machine-test to Esta es una prueba de máquina.                                                                     
ℹ 🇪🇸 Translated message already-existing to Esta clave existe y es una prueba.       

Just to let you know: The flags doesn't display correctly with the default settings.
They getting displayed like [E][S] for Spain -> 🇪🇸.

[tanpengsccd]

On MacOs, "Menlo" is actually breaking some emojis for me. I've installed the free Robot font from Google:

https://fonts.google.com/specimen/Roboto+Mono

and changed my editor.fontFamily to:

"editor.fontFamily": "'Roboto Mono', 'Apple Color Emoji'"

And it's a pretty acceptable alternative.

It is perfect for mac user, like ♻️ can't display the color.

[adrena11n]

덕분에 2022@alexdima! 다음을 제거하여 macOS에서 이 문제를 해결했습니다.Menlo``editor.fontFamily": "Monaco, 'Courier New', monospace",

이제 모든 것이 예상대로 작동합니다.

🙌

Thank you, you are save my life!

[p-i-]

Monaco, 'Apple Color Emoji' works on my mac.
✏️ ⚠️ ☣️ ♻️ ☎️ ‼️ ⁉️ all render, although the last 2 come out white (not red).
ref #223483