1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Anyone know how to style emojis?

Discussion in 'CSS' started by qwikad.com, Oct 26, 2016.

  1. #1
    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:

    1.gif

    However, an ipad renders the same code as:
    SEMrush
    [​IMG]

    Samsung / LG mobile devices render it as:

    [​IMG]

    So how would you style it to make it look the same in all devices (the way it looks in my jsfiddle)?
     
    qwikad.com, Oct 26, 2016 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,417
    Likes Received:
    351
    Best Answers:
    27
    Trophy Points:
    335
    #2
    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
     
    kk5st, Oct 26, 2016 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,565
    Likes Received:
    1,036
    Best Answers:
    19
    Trophy Points:
    400
    #3
    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.
     
    qwikad.com, Oct 27, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,565
    Likes Received:
    1,036
    Best Answers:
    19
    Trophy Points:
    400
    #4
    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.
     
    qwikad.com, Oct 28, 2016 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,666
    Likes Received:
    1,563
    Best Answers:
    226
    Trophy Points:
    515
    #5
    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.
     
    deathshadow, Nov 5, 2016 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,417
    Likes Received:
    351
    Best Answers:
    27
    Trophy Points:
    335
    #6
    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
     
    kk5st, Nov 5, 2016 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,565
    Likes Received:
    1,036
    Best Answers:
    19
    Trophy Points:
    400
    #7
    Or I could use a heart. Or is it kind of tacky too?
     
    qwikad.com, Nov 5, 2016 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,666
    Likes Received:
    1,563
    Best Answers:
    226
    Trophy Points:
    515
    #8
    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.
     
    deathshadow, Nov 5, 2016 IP
  9. ddevcodes

    ddevcodes Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    21
    #9
    Why not to use some emoji font lib? Like EmojiOne.
     
    ddevcodes, Nov 9, 2016 IP