KPC
Kevin Powell - CommunityPeacock Plume

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. 
.phoenix::after {
    content: "🐦🔥";
}
.phoenix::after {
        content: "\01F426\01F525";
}
.phoenix::after {
    content: "🐦🔥";
}
.phoenix::after {
        content: "\01F426\01F525";
}
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.
ἔρως•17d ago
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 bird
PP
Peacock Plume•17d ago
I see
ἔρως•17d ago
in this case, it seems that only the noto emoji font supports the compound emoji with the bird and fire
PP
Peacock Plume•17d ago
Alright thanks a lot, I will check it out if I have further issues I'll let you know 🙏
ἔρως•17d ago
by the way, you're missing the \200D, to combine both emojis
PP
Peacock Plume•17d ago
Yes I saw on the page you showed me! Thanks!
ἔρως•17d ago
PP
Peacock Plume•17d ago
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.
ἔρως•17d ago
but you have to be careful with support for that variant
PP
Peacock Plume•17d ago
Are you saying it's not free?
ἔρως•17d ago
some ios devices that are still supported may not work well with color fonts
PP
Peacock Plume•17d ago
I see I see yeah that's clear
ἔρως•17d ago
specially if they aren't updated due to performance reasons
PP
Peacock Plume•17d ago
Mainly use it for desktop and nothing too crucial actually just a hobby project. Right.
ἔρως•17d ago
you should design your own, or try to find an icon that you like, then use it as an svg <symbol> instead
PP
Peacock Plume•17d ago
True indeed and I do sometimes too. Well thanks again and have a good one, all the best!
ἔρως•17d ago
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
PP
Peacock Plume•17d ago
🙏 👍
Want results from more Discord servers?
Add your server
More Posts
Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`. But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but couOverflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inpUsing Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors. What i dAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several realReact + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return: ``` <ul className="quickLink_list"> <li> creating calculator``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgColLogin Page Improvements/ChangesI'm still learning html and css. What can I improve in my login page? <body> <div class="main-cAnimating outline offsetsIs there a smoother way to animate the offset of an outline? It looks choppy. https://codepen.io/nVertical alignment without wrapper?Problem: https://codepen.io/peendoc/pen/YzMgrwN I want the links to be clickable along the entire heAccessibility with icons/ images in linksHey everyone, I have been looking around with no real luck about the best practice for using svg's aCSS Custom Property Cheat SheetThis is my own cheat sheet for a alternative of Kevin's own one