Emoji don’t show up properly – why?

  • Resolved letsdothepenguin

    (@letsdothepenguin)


    2 years, 4 months ago

    Whenever I include an emoji on my website (link included in this post in the destinated box) it doesn’t show up properly.

    Only in the title of the page or post it seems normal, in the post itself it shows up very small and more towards the top.

    If you go to the website link I included, you will see some examples of what I mean (in the H1 and H2, in the P the emoji completely disappears).

    Why does the emoji show up this way and how can I fix it?

    I’m using the WordPress theme Neve and (as far as I know) I haven’t changed any emoji-related settings or code.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • I’m using the WordPress theme Neve and (as far as I know) I haven’t changed any emoji-related settings or code.

    You sure have ??

    Because emojis are font-dependent and their appearance often differs a lot from one device platform to another, WordPress uses Twitter’s version of emoji (Twemoji) and converts them to images to ensure consistent appearance across all devices.

    But the following custom CSS code you added in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS is affecting the appearance of WordPress’ emoji images, hence the problem you’re seeing. 

    .entry-content img {
    padding-bottom: 20px!important;
}

    The !important — considered the shotgun approach — is making this code affect all images in the content area (div with class “entry-content”), including the emoji images. Using !important is not considered good CSS coding practice, as it can have unintended consequences (as you’re seeing now.)

    The “hero” section at the top is outside this content area, that’s why it’s unaffected.

    Removing the !important from your code should fix the emoji issue.

    But if you MUST ABSOLUTELY have the !important in the above code (you can certainly do without it, you may just have to tweak the selector), then we need to give the same super-powers to the emoji images with the following code:

    img.emoji {
padding-bottom: 0 !important;
}

    I hope that helps!

    Thread Starter letsdothepenguin

    (@letsdothepenguin)

    I didn’t realise the emoji was qualified as an image in this case! Thanks a lot, I solved the problem ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Emoji don’t show up properly – why?’ is closed to new replies.

Tags