How can I get colour emois on the web - css

Question

🍌 🙇‍♂️ 😖 👋 🐒 🥂 😢 🤔 😠 🤩 🙄 🥺 👐 😉 😠 🤯 🥒 😾 🤣 😈 😮 🙏 👍 ❤️ 😱 🥱
I am trying to replace a web based emoticon system based on a series of gif images that I implemented around 2008 sort of time with characters from the unicode set. The list of emojis that I display above is my choice of icons to replace the equivalent emoticon set I was using. Not perfect, but close enough.
Except that they are not in colour!
When I paste them , as I pasted them here into gedit, gedit displays them all in colour. However even though I took the font that I think gedit is using (Dejavu Sans Mono) loaded it into a web page using #font-face there are displays, as here in mostly black and white, with just a couple in colour. Am I doing something wrong?
Here is part of my css
.item {
height: 60px;
display: flex;
flex-direction: row;
font-family:'DejaVu Sans Mono', Helvetica, sans-serif;
scroll-snap-align:start;
border-radius: 5px;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
margin:0 5px 5px 3px;
}
#font-face {
font-family: 'DejaVu Sans Mono';
src: url('/fonts/DejaVuSansMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

Answer 1

I found a solution that works on my Chrome Desktop browser, my Android Phone and my Apple Ipad.
I downloaded this font
https://github.com/googlefonts/noto-emoji/blob/master/fonts/NotoColorEmoji.ttf
Put it in my /fonts directory where the web server could find it.
and then used the following in my CSS
#font-face {
font-family: 'NotoColorEmoji';
src: url('/fonts/NotoColorEmoji.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
and
.item {
height: 60px;
display: flex;
flex-direction: row;
font-family:'NotoColorEmoji', 'Roboto', Helvetica, sans-serif;
scroll-snap-align:start;
border-radius: 5px;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
margin:0 5px 5px 3px;
}
Now all my chosen emoji are in color.