Using escaped unicode in content
Is it possible to use escaped unicode in content to get emoji combinations like Phoenix for example, seems like this is not working. (🐦🔥)
I tried both with the plain emoji and the escaped unicode.
But this only works if I use it in the html span tag directly on the page, but not as after pseudo element like in the code above. Of course the font is set and all I was using Noto Color Emoji which supports this combination.
18 Replies
you have to use the separated unicode characters, or add
@charset "utf-8"; at the top of the css
https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
also, the font that you use has to support the characters
https://emojiterra.com/phoenix-bird/ <-- as an example, this website gives you the css character sequence to show the birdI see
in this case, it seems that only the noto emoji font supports the compound emoji
with the bird and fire
Alright thanks a lot, I will check it out if I have further issues I'll let you know 🙏
by the way, you're missing the
\200D, to combine both emojisYes I saw on the page you showed me! Thanks!
https://fonts.google.com/noto/specimen/Noto+Color+Emoji?preview.text=%F0%9F%90%A6%E2%80%8D%F0%9F%94%A5 <-- you can get the font from here
you're welcome
Great awesome it works! Thanks a lot for all that info, you're the best!
I know I'm actually using the font from the Github repo, if you use the Variable version of it you can reduce the file-size to 1.9mb because it uses COLRV1 palettes for all the colors I think.
but you have to be careful with support for that variant
Are you saying it's not free?
some ios devices that are still supported may not work well with color fonts
I see I see yeah that's clear
specially if they aren't updated due to performance reasons
Mainly use it for desktop and nothing too crucial actually just a hobby project.
Right.
you should design your own, or try to find an icon that you like, then use it as an svg
<symbol> insteadTrue indeed and I do sometimes too.
Well thanks again and have a good one, all the best!
https://icones.js.org/ <-- you can use this website here, to find the icons
i don't think it has this one, but oh well
you're welcome
🙏 👍