Color for Unicode Emoji

Question

It's possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color?

For example, here is some Emoji and some regular (plane 0) Unicode symbols. All should be red, but only the symbols are rendered in red.

Associated HTML + CSS:

<p>
                  

            

标签： html css unicode emoji

举报

Answer 1

If you want to keep the details within the emoji you can use filter: url(svg) where url() will take an svg filter

svg {
  display: none;
}

div {
  -webkit-filter: url(#red);
  filter: url(#red);
}

<svg>
  <filter id="red">
    <feColorMatrix type="matrix" values="
      1 0 0 0 0
      0 0 0 0 0
      0 0 0 0 0
      0 0 0 1 0" />
  </filter>
</svg>

<div>                                                                    

                                                        
            

查看更多

0人赞 添加讨论(0) 举报

•  加载中...

Answer 2

IF YOU NEED TO USE CSS AFTER,BEFORE PSEUDO ELEMENT YOU CAN PROCED LIKE THIS

<span class="react-thumb-fly" title="Aimé">
   <button class="react-toggle-icon-thumb"></button>
</span>

THEN WRITE THIS FOR CSS

.react-toggle-icon-thumb {
  width: 20pt;
  height: 20pt;
  font-size: 30pt;
  position: relative;
  color: gray;
  cursor: pointer;
  border: none;
  background: transparent;
  margin-left: 0px;
  margin-right: 8px;
  top: -0px;
}
.react-toggle-icon-thumb:before, .react-toggle-icon-thumb:after {
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s ease-out;
  content: "                                                                    

                                                        
            

查看更多

0人赞 添加讨论(0) 举报