title: Why does Bootstrap display wrong pencil icon?
body: <p>I want this icon on my page which I found at <a href="http://glyphicons.bootstrapcheatsheets.com/" rel="nofollow noreferrer">http://glyphicons.bootstrapcheatsheets.com</a></p>
  
  <p><img src="https://i.stack.imgur.com/SazSx.png" alt="enter image description here"></p>
  
  <p>However, when the HTML it gives me:</p>
  
  <pre><code>&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>displays this icon:</p>
  
  <p><img src="https://i.stack.imgur.com/2CalV.png" alt="enter image description here"></p>
  
  <p><strong>How can I get the first pencil icon instead of the second?</strong>
  <hr/>
  <strong>ADDENDUM:</strong> <code>&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt;</code> gives me:</p>
  
  <p><img src="https://i.stack.imgur.com/ZwBSd.png" alt="enter image description here"></p>
  
  <hr/>
  
  <p><strong>ADDENDUM:</strong> I download Bootstrap again and copied the font files into my font directory, but still get the wrong icons:</p>
  
  <p><img src="https://i.stack.imgur.com/IHSlA.png" alt="enter image description here"></p>