如何获取whstsapp颜色Emojis作为与.css链接的图标？

Question

我想在我的网站中使用whatsapp表情符号作为图标。 我需要网站的网址或css的链接来获取whatsapp表情符号作为图标

Answer 1

你可以看到这个页面https://afeld.github.io/emoji-css/也许我可以帮助你......或者你应该搜索这个页面，否则你应该搜索这个代码。

  <!-- 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"
  );
}

Answer 2

这是CSS的链接

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

这些是类： https://afeld.github.io/emoji-css/

Answer 3

您可以将此图像用作背景并设置您想要用作表情符号的位置，这称为 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.stack.imgur.com/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>