title: Unable to properly display Twitter Bootstrap glyphicons
body: <p>I was working through the <a href="http://angularjs.org/" rel="nofollow">Angular.js</a> Todo application video tutorial and I encountered a problem including the Twitter Bootstrap 3 glyphicons in the index.html file (the icons show up as non-descriptive images, both in Chrome and in Firefox).</p>
  
  <p>This is how I am adding the bootstrap and bootstrap-glyphicons css files in index.html:</p>
  
  <pre><code>&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://documentcloud.github.com/underscore/underscore-min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="todo.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="bootstrap/css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="bootstrap/css/bootstrap-glyphicons.css"&gt;
    &lt;link rel="stylesheet" href="todo.css"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>And this is how I am adding the required glyphicon later in the file:</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
    &lt;input type="text" ng-model="formTodoText" ng-model-instant&gt;
    &lt;button class="btn"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The bootstrap-glyphicons fonts files are in bootstrap/css/fonts. Specifically, the files are:</p>
  
  <ol>
  <li>glyphiconshalflings-regular.eot</li>
  <li>glyphiconshalflings-regular.otf</li>
  <li>glyphiconshalflings-regular.svg</li>
  <li>glyphiconshalflings-regular.ttf</li>
  <li>glyphiconshalflings-regular.woff</li>
  </ol>
  
  <p>Any thoughts on what to do to properly access the icons? Thank you so much for your help! </p>