title: Unicode character, down triangle, shows up as strange text
body: <p>I have a webpage on which I'm using a unicode down triangle on buttons to indicate that selecting those buttons will display a drop-down. </p>
  
  <p>I'm adding the triangles in css thusly:  </p>
  
  <pre class="lang-css prettyprint-override"><code>    .icon:after {
          content:"▼";
      }
      .icon {
          width:12px;
          height:12px;
          margin: 3px;
          display: inline-block;
          cursor:default;
      }
  </code></pre>
  
  <p>The meta tags in the page are:  </p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, width=device-width" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; chrome=1" &gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  </code></pre>
  
  <p>However, the triangles don't show up as triangles, they show up like this: <img src="https://i.stack.imgur.com/LJxWk.png" alt="strange text instead of unicode character"></p>
  
  <p>Any idea why it might be showing up like this and how to fix it?</p>