Emojis in hugo?

Thanks @alexandros. Right, I was thinking that is what would need to be done, and, for those searching, it is no problem to chuck a <span> in the middle of your markdown to set the needed class.

I tested, and adding those fonts to the end of one’s usual stack seems to have no effect. I also found that Hugo does not insert any kind of markup that could be leveraged; whether you paste in an emoji, or use the shortcut codes like :smile:, they glyphs just get inserted in the html, when you look at the page source.

1 Like

Hugo’s emojify function and the enableEmoji = true configuration basically convert the shorthand codes e.g. :smile: to the respective emoji glyph —> :blush:

There is no special markup or way to directly target these glyphs via CSS -as far as I know- therefore a span (or any other tag) is needed to assign a class.

Yeah, that is my understanding too, after some tests.

I did not even remember the shortcut syntax, after using the macOS character picker for a few months. A quick ctrl-cmd-space gives:

2 Likes

Hi everyone. I know this is quite old but I just noticed that emojis added this way are not vector images. In my website I use them as icons (buttons actually) and when they’re big enough it’s apparent they’re not vectors. Is there anything I could do to make them look like vectors? Thanks in advance!

“Vectors” = images with yellow color for the face? And your site shows black icons? Or what exactly do you mean by that?

It depends on the used browser, how character emojis are displayed. Many browsers do them in color, some mobile phones do them in color. But basically those emojis are like special characters.

If you want to always show colorful emojis you need to use a javascript library, that replaces the :smile: and other tags with images. like this one (just a quick google):

All that Hugo is doing with the enable emoji config is replacing :emoji: with the actual character code.