Anyone know how to style emojis?

I'd like to use this thumbs up for one of my projects, but it renders differently on different OPs and/or browsers:

https://jsfiddle.net/h75mmuyj/1/

That's how I want it to show in all browsers:



However, an ipad renders the same code as:



Samsung / LG mobile devices render it as:



So how would you style it to make it look the same in all devices (the way it looks in my jsfiddle)?

 

You have forgot to quote multi-word fonts. Try this:

.likes {
font-family: "Segoe UI Emoji", "Segoe UI Symbol", Quivira, Symbola;
font-size: 2.5em;
color: #CCCCCC;
display: block;
cursor: pointer;
}

Code (markup):

I don't support those fonts on my machine, so can't verify the patch.

gary

 

Thanks. I tried all sorts of things. It appears that it's virtually impossible to style emojis. They'll show the way they're designed to show for this or that OPs. Got tired of looking for a solution. Going to use the Font Awesome instead.

 

Not sure what I meant by the bloody OPs... lol. I meant to say OS of course. Indeed, we should be able to edit our posts way past the 8 hour mark.

 

If you want a consistent font for those, you're going to have to go webfont. Since those devices don't HAVE segoe UI (a windows only thing) they're dropping through to either the fallback families or the system default if there's no match for them.

Mind you, "segoe ui" is a copyrighted Microsoft font, so making a webfont out of it would actually be violating the licensing terms.

 

Are you wedded to the 'thumbs up' symbol 'til death do you part, which may be a good choice for a juvenile target audience, or would another do the job, for example one of the commonly supported check marks?

  p {
  font-size: 1em;}

  p.like1 {
   font-size: 2.5em;
   color: red;}

  p.like2 {
   font-size: 2.5em;
   color: green;}

  p.like3 {
   font-size: 2.5em;
   color: blue;}

  p.like4 {
   font-size: 2.5em;
   color: cyan;}

  p.like5 {
   font-size: 2.5em;
   color: magenta;}

  p.like6 {
   font-size: 2.5em;
   color: yellow;}
____________________________
  <p class="like1">&#x2714</p>
  <p class="like2">&#x2714</p>
  <p class="like3">&#x2714</p>
  <p class="like4">&#x2714</p>
  <p class="like5">&#x2714</p>
  <p class="like6">&#x2714</p>

Code (markup):

cheers,

gary

 

Or I could use a heart. Or is it kind of tacky too?

 

They're emoji's, they're all tacky... but in a b-movie schlock kind of way where it's so bad it's fun.

 

Why not to use some emoji font lib? Like EmojiOne.