Comment obtenir la couleur whstsapp Emojis comme icône pour lier avec .css?

Question

Je veux utiliser whatsapp emojis comme icônes sur mon site web. i besoin de l'URL du site ou le lien de css pour obtenir WhatsApp Emojis comme icône

Answer 1

Voici le lien CSS

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

Ce sont les classes: https://afeld.github.io/emoji-css/

Answer 2

vous pouvez voir cette page https://afeld.github.io/emoji-css/ je peux peut-être aider à u..or u doit rechercher cette page ou u doit rechercher ce 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" 
); 
} 

Answer 3

vous pouvez utiliser cette image comme arrière-plan et la position définie pour le emoji que vous souhaitez utiliser par exemple cela s'appelle le CSS IMAGE SPRITESsee 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>