when selecting flag of any country then it is showing country name instead of flag icon

[Chetnatl]

For some of the country's flags, it is showing the country name. but I want to show the flag image to the user.

See in below image:

[duong-dx]

Have you figured out how to fix this ?

[Chetnatl]

@duong120798 no

[rajeevnathverma]

Is anyone found solution for it ?

[EtienneLem]

If your browser does support these native emojis and they only appear this way in an input, you may need to add these fonts to your inputs:

input {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
}

[Lakshmanan30111995]

Even I was facing the same issue in chrome browser.But in firefox it was loading correctly. The problem might be that you have to include the file manually in chrome browser. Try this work-around and let me know, which worked for me:

1. Download TwemojiMozilla.ttf file from https://github.com/mozilla/twemoji-colr/releases.
2. Include it in JS file by import './TwemojiMozilla.ttf';
3. Include it in your css component by

@font-face { font-family: "TwemojiMozilla"; src: local("TwemojiMozilla"), url("./TwemojiMozilla.ttf") format("truetype"); font-weight: normal; } / Your Input Div/ .input { font-family: "TwemojiMozilla"; }

4. Hopefully, now it should load.

[rajeevnathverma143]

Even I was facing the same issue in chrome browser.But in firefox it was loading correctly. The problem might be that you have to include the file manually in chrome browser. Try this work-around and let me know, which worked for me:

1. Download TwemojiMozilla.ttf file from https://github.com/mozilla/twemoji-colr/releases.
2. Include it in JS file by import './TwemojiMozilla.ttf';
3. Include it in your css component by

@font-face { font-family: "TwemojiMozilla"; src: local("TwemojiMozilla"), url("./TwemojiMozilla.ttf") format("truetype"); font-weight: normal; } / Your Input Div/ .input { font-family: "TwemojiMozilla"; }

1. Hopefully, now it should load.

Great Its working, Thank you so much !

[rajeevnathverma143]

Using this font-family flag are now showing but on this input field not showing any numbers like 1 2 3 on chrome . Please suggest me what need for it.

[Lakshmanan30111995]

Using this font-family flag are now showing but on this input field not showing any numbers like 1 2 3 on chrome . Please suggest me what need for it.

Please use this for cross browser support(Chrome, Firefox, Safari) and cross OS support (MAC, Windows)

.input { font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Open-Sans', "Apple Color Emoji", "TwemojiMozilla", "Noto Color Emoji", "Android Emoji", sans-serif; }

This will display characters, emoji's and numbers.

[ji123mmy]

Using this font-family flag are now showing but on this input field not showing any numbers like 1 2 3 on chrome . Please suggest me what need for it.

Please use this for cross browser support(Chrome, Firefox, Safari) and cross OS support (MAC, Windows)

.input { font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Open-Sans', "Apple Color Emoji", "TwemojiMozilla", "Noto Color Emoji", "Android Emoji", sans-serif; }

This will display characters, emoji's and numbers.

It didn't work . Is there any other solution?

[riyazpanarwala]

Is this issue fixed ?

[basharatanis]

Hi, I am using latest version (3.0.1) of emoji-mart. I have couple of issues in the app right now.

1. When I select flag of any country then it is showing country name instead of flag icon (ONLY IN WINDOWS)
2. I cannot see some emojis such as thumbsup, thumbsdown, etc.

Kindly let me know if this issue is fixed or if you have any idea to get this issue fixed.

Thanks

[ajaythakkar]

Even I was facing the same issue in chrome browser.But in firefox it was loading correctly. The problem might be that you have to include the file manually in chrome browser. Try this work-around and let me know, which worked for me:

1. Download TwemojiMozilla.ttf file from https://github.com/mozilla/twemoji-colr/releases.
2. Include it in JS file by import './TwemojiMozilla.ttf';
3. Include it in your css component by

@font-face { font-family: "TwemojiMozilla"; src: local("TwemojiMozilla"), url("./TwemojiMozilla.ttf") format("truetype"); font-weight: normal; } / Your Input Div/ .input { font-family: "TwemojiMozilla"; }

4. Hopefully, now it should load.

This is working but the number was not working so you need to modify it like:

font-family: Arial,"TwemojiMozilla"

This will work with emoji and numbers

[cg-tester]

@Lakshmanan30111995 , I want to implement your solution. But I am developing Angular project. How can I add .ttf file and css? Please let me know.

[ajaythakkar]

@Lakshmanan30111995 , I want to implement your solution. But I am developing Angular project. How can I add .ttf file and css? Please let me know.

I have also worked with angular projects, here are the details: `/ Emoji Text / @font-face { font-family: "TwemojiMozilla"; src: local("TwemojiMozilla"), url("assets/fonts/TwemojiMozilla.ttf") format("truetype"); font-weight: normal; }

textarea, .emoji_text { font-family: "Poppins", "TwemojiMozilla"; }

/ Emoji Text /`

[cg-tester]

@Lakshmanan30111995 Thank you very much. But please tell me more details. I use emoji-mart in quill-editor and if I click flag emoji, flag emojis should be drawn on quill-editor.

[cg-tester]

@ajaythakkar Thank you very much. Please tell me more details.

[cg-tester]

Oh, @ajaythakkar , @Lakshmanan30111995 , Thank you very much. It works well. Great!