emojionearea icon indicating copy to clipboard operation
emojionearea copied to clipboard

Change emojionearea-picker icon image by smiley font or some way to change its default color

Open jsmitjans opened this issue 4 years ago • 4 comments

Hello mervick,Is there any way I can replace the emoticon icon that opens the picker with an emoji icon font? The problem is that I am working on a website that has 2 themes, one dark and one light, and in the dark theme I need the background of the textarea to be black, but when I change the color, then the emoji picker icon is not looks good.Thanks in advance. Here is an example of what I need to do:(I need for a dark background to show the icon in white or light color ) https://jsfiddle.net/qjw9bs0o/1/

jsmitjans avatar Mar 23 '20 20:03 jsmitjans

For quick fix you can invert colors in css

.emojionearea .emojionearea-button {
  -webkit-filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
  filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
}

Example: https://jsfiddle.net/mervick/m8cqLdrj/4/

If you don't like that, you can change it by modifying css

mervick avatar Mar 24 '20 18:03 mervick

That's the same way I did it, but is there any way to make that emoji completely white?

jsmitjans avatar Mar 24 '20 20:03 jsmitjans

It's an image, take a look at css. https://github.com/mervick/emojionearea/blob/99129f7/dist/emojionearea.css#L555

If you want to change image, just do it

mervick avatar Mar 24 '20 21:03 mervick

How to add a Label next to emoticon that pops open the emojiPicker, like 😄 Add Emoji, for now the emoticon is a button that opens and closes the emojiPicker. I wanted to add a label along with the smiley emoji and if user hits the emoticon or the Add Emoji the picker should pop

shashankm489 avatar May 15 '23 14:05 shashankm489