问如何获得与.css链接的彩色表情符号作为图标？

EN

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

.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>