CODEWITHSUNDEEP
htmlcssicons
Salmanul Faris
Salmanul Faris

Reputation: 356

How to get whstsapp color Emojis as icon to link with .css?

i want to use whatsapp emojis as icons in my website. i need the url of website or the link of css to get whatsapp emojis as iconenter image description here

Upvotes: 0

Views: 2174

Answers (3)

Dhemie Seguerra
Dhemie Seguerra

Reputation: 26

Here is the link of CSS

link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"

These are the classes: https://afeld.github.io/emoji-css/

Upvotes: 1

M0ns1f
M0ns1f

Reputation: 2725

you can use this image as background and set position for the emoji you want to use for exemple this is called the CSS IMAGE SPRITES see this

.emojis{display:inline-block;width:100%;height:100%;}
.smile,.sad,.cry,.slipy,.angry,.emoji1,.emoji2,.emoji3{
    background-image : url(https://i.sstatic.net/Xrdcg.jpg);
    display:inline-block;
    background-repeat:no-repeat;
    width: 183px;
    height: 150px;
    overflow: hidden;
    text-indent: -9999px;
}
.smile {
    background-position: -31px 0;
}
.sad {
    background-position: -1387px -500px;
}
.cry {
    background-position: -354px 0px;
}
.angry {
    background-position: -177px -339px;
}
<div class="emojis" >
<div class="smile"></div>
<div class="sad"></div>
<div class="cry"></div>
<div class="slipy"></div>
<div class="angry"></div>
<div class="emoji1"></div>
<div class="emoji2"></div>
<div class="emoji3"></div>
</div>

Upvotes: 0

&#220;neys
&#220;neys

Reputation: 152

you can see this page https://afeld.github.io/emoji-css/ maybe i can help u..or u should search this page or u should search this code.

  <!-- The wrap for everything, so you can position it wherever.
         Also, so all the other elements are siblings. -->
    <div class="emoji-toggle emoji-travel">

      <!-- The input is first, so the ~ selector can select siblings after it. -->
      <input type="checkbox" id="toggle2" class="toggle">

      <!-- The emoji is a psuedo element on this. -->
      <div class="emoji"></div>

      <!-- This is absolutely positioned over everything.
           Also, the split/label comes from using both :before and :after -->
      <label for="toggle2" class="well"></label>

    </div## Heading ##


And then try for css this code.



  @mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
  .toggle {
    ~.emoji:before {
      content: $leftEmoji;
    }
    &:checked {
      ~.emoji:before {
        content: $rightEmoji;
      }
    }
     ~label {
      &:before {
        content: $leftLabel;
      }
      &:after {
        content: $rightLabel;
      }
    }
  }
}

// Usage
.emoji-happy {
  @include emojiType(
    "\01F604", "\01F620", "Happy", "Mad"
  );
}

Upvotes: 1

Related Questions