title: Emoji don't display properly or don't display at all
body: <p>I made a game I use at the school I teach, it has some emojis that display fine in my computer :
  <a href="https://i.stack.imgur.com/ofKUl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ofKUl.png" alt="enter image description here" /></a>
  but at the school computer I get only their outline(sorry for the photo):
  <a href="https://i.stack.imgur.com/hxK9u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hxK9u.png" alt="enter image description here" /></a></p>
  <p>I also use the hurricane emoji ️ that is not showing at all.</p>
  <p>Is there a way to make sure the emojis will be shown properly or is there a way to set a fallback in case the emoji can't be displayed?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
  
  
    --blue: #5519ff;
     --dark-blue: rgb(1, 6, 77);
     --blue-outline-shadow: #3872b5;
    --blue-outline-highlight: #35a3cc;
    --yellow-outline-shadow: #c4bb00;
    --yellow-outline-highlight: #fff64d;
  
  }
  
  
  
  .emoji {
    text-shadow: none;
    padding-left: 1vw;
    font-family: apple color emoji, segoe ui emoji, noto color emoji,
      android emoji, emojisymbols, emojione mozilla, twemoji mozilla,
      segoe ui symbol;
    color: none;
    -webkit-text-stroke-width: 0px !important;
  }
  
  .Rtable-cell {
    box-sizing: border-box;
    flex-wrap: nowrap;
    flex-grow: 0;
    padding: 1vw;
    overflow: hidden;
    list-style: none;
    font-size: 4vw;
    place-items: center;
  }
  
  .letters {
    display: flex;
    flex-direction: row;
    justify-content: center;
    place-items: center;
    text-align: center;
    color: var(--dark-blue);
    border-bottom: 3px solid var(--dark-blue);
    font-size: 4vw !important;
    /*  padding-bottom: 0; */
  }
  
  .blue {
    color: var(--blue-outline-highlight) !important;
    font-size: 5vw !important;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--dark-blue);
    text-shadow: 0 1px 0px var(--yellow-outline-shadow),
      1px 0 0px var(--yellow-outline-highlight),
      1px 2px 1px var(--yellow-outline-shadow),
      2px 1px 1px var(--yellow-outline-highlight),
      2px 3px 2px var(--yellow-outline-shadow),
      3px 2px 2px var(--yellow-outline-highlight),
      3px 4px 2px var(--yellow-outline-shadow),
      4px 3px 3px var(--yellow-outline-highlight),
      4px 5px 3px var(--yellow-outline-shadow),
      5px 4px 2px var(--yellow-outline-highlight),
      5px 6px 2px var(--yellow-outline-shadow),
      6px 5px 2px var(--yellow-outline-highlight),
      6px 7px 1px var(--yellow-outline-shadow),
      7px 6px 1px var(--yellow-outline-highlight),
      7px 8px 0px var(--yellow-outline-shadow),
      8px 7px 0px var(--yellow-outline-highlight),
      -12px -12px 2px rgba(49, 206, 99, 0);
  }
  
  .place {
    background-color: #fee140;
    background-image: linear-gradient(to bottom, 0%, #ffff7a #fff500 100%);
    border: 3px solid var(--dark-blue);
    text-shadow: var(--dark-blue) 0px -2px 0;
    box-shadow: inset 0px -5px 10px 1px rgba(1, 6, 77, 0.6);
    font-size: 4vw;
    font-weight: bolder;
    color: white;
    text-align: center;
    height:100px;
  }
  
  .disabled {
    pointer-events: none;
    background-image: linear-gradient(to top, #fee140 0%, #fa709a 100%);
    box-shadow: inset 0px 5px 10px 1px rgba(1, 6, 77, 0.6);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Rtable-cell letters blue"&gt;A &lt;span class="emoji"&gt;&lt;/span&gt;&lt;/div&gt;
  
  &lt;div class="Rtable-cell place disabled" &gt;️&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>