Hey guys,
Most of the emojis on the website turned into “???” this morning. Some of the emojis work while most of them are showing as question marks. No changes have been made on the website, and no updates from my side.
So I’ve been reading some solutions and tried updating plugins, rolling back to previous version, tried installing emoji plugins and still not working. I’ve also tried opening my site with another browser, cleared cache, it’s not that. Only thing that changed is that there were four “???” before rolling back to previous version and now it is only one “?” in the place of emojies.
Does anyone know what the problem might be?
This is usually caused by an incorrectly determined character code set. Make sure that your page has a character set of utf-8 (unicode) with a tag like <meta charset="utf-8"> in the head of the page, that your browser also detects it as such and that you are using a font that supports unicode character sets.
Why it probably worked earlier and not now is that the browser attempts to auto detect and gets it wrong sometimes. Setting the character set manually tells the browser so it doesn’t have to guess when it loads a page.
Thanks @Martyr2 I’ve tried this and it doesn’t work. What should I do next?
Could you share a link to your site.
Where are you getting the ??? I don’t see any. However, there are several HTML errors in your page which may or may not affect how it is being displayed.
Same here. The emojis look ok to me. E.g.
Where can I see the question marks?
There a are more like this on the page. They were displayed like four “???” now that I rolled back to previous version it turned out to only one “?”.
Do you think those errors might be blocking the display of emojis? Can you point me to them?
Yeah that’s right. Some of the emojis work, while some don’t. It doesn’t make sense to me.
You should be using the HTML validator. It will show you all the errors (plus some warnings).
It looks to me as though the character after “Serious traffic and revenue growth” is supposed to be a question mark!
Thanks @Gandalf , I’ll look into this.
Right. It seems the character is being sent across the wire as a question mark (you can check this by viewing page source), meaning the problem is likely occurring on the backend as opposed to the client.
Are you using some kind of WP plugin to render the emojis?
I don’t use any plugin to render the emojis.
So are the emojis previewing ok in the WP editor? I guess you’re inserting them into the page directly.
No they don’t preview correctly, they show up as a question mark right away.
Got it.
I’m not an expert by any means, but the thing with emojis is that if you add them to the page and then leave it to the user’s browser to render them, you run the risk of them not being displayed correctly.
A more popular approach would be to use an icon kit. This ships the icons to the user (in the same way as you might add a custom font to the page) and will ensure that they display correctly on all devices. Font Awesome is a popular choice for this.
Of course that means you are adding an extra dependency for the sake of a couple of icons, so it’s understandable if you don’t want to do this.
Coming back to them not displaying in the WP editor, if I were you I would start troubleshooting to find out where the problem lies. For example, try logging into the WP backend on a different browser and seeing if you can add the emojis to the page from there.
How were you generating them in the first place? Were you just copy/pasting them from a site like emojipedia?
1 Like
I’ll way into this conversation without the expertise of @James_Hibbard and perhaps others, but I was having issue with the 3 question marks too. I was using an html editor and I was using <meta charset="utf-8">… So what I did to remove them, and it seems like it worked was to use a replace function or a RegEX function to get rid of them. If you just have a few of them and it’s important that you use them, is to make them a gif image and use it after the text.
1 Like
It is possible that the font you are using does not support the emoji characters. Try switching to a different font that supports emoji characters, such as Noto Color Emoji or Apple Color Emoji. Additionally, you may need to update your web browser or operating system to ensure that the emoji characters are properly displayed.
If it doesn’t work then the best way to solve this issue is to check the encoding of your website. It is possible that the font you are using does not support the emoji characters. Try switching to a different font that supports emoji characters, such as Noto Color Emoji or Apple Color Emoji. Additionally, you may need to update your web browser or operating system to ensure that the emoji characters are properly displayed.
