---
---

<!doctype html>
<html lang="en">
  <head>
    <title>Emoji CSS</title>
    <meta charset="utf-8">
    <meta property="og:title" content="Emoji CSS" />
    <meta property="og:image" content="https://emoji-css.afeld.me/emoji/thumbsup.png" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://emoji-css.afeld.me/" />
    <meta name="description" content="Emoji Web HTML Demo">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="public/favicon.ico"/>
    <link href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">
    <link href="emoji.css" rel="stylesheet">
    <link href="public/style.css" rel="stylesheet">
  </head>
  <body id="content">
    <div id="header">
      <h1>Emoji CSS</h1>
      <input class="search" placeholder="Instant Search">
    </div>
    <p>
      Want to include emoji in your HTML? Just include the (minified) stylesheet below, then add <code>&lt;i&gt;</code> tags to insert emoji. That's it!<br>
      &#x2708; <b>Click the emoji code and it will be copied to your clipboard.</b>
    </p>
{% highlight html %}
<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet">

{% assign emoji=site.data.emoji[104] %}{% include emoji-icon.html %}

{% endhighlight %}
    <p>
      By default, the emoji will be served as PNGs. To use SVG instead, use the <code>em-svg</code> class instead of <code>em</code>. This will scale better, but has larger file size.
    </p>
    <ul class="emojis">
      {% for emoji in site.data.emoji %}
        {% capture clipboard_text %}{% include emoji-icon.html %}{% endcapture %}
        <li class="emoji" data-clipboard-text="{{ clipboard_text | replace:'"','&quot;' | replace:'<','&lt;' | replace:'>','&gt;' }}">
          {% include emoji.html %}
        </li>
      {% endfor %}
    </ul>
    <a href="https://github.com/afeld/emoji-css/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
    <script src="public/script.js"></script>
  </body>
</html>
