title: Twitter Bootstrap 3 Glyphicons error
body: <p>I'm trying to upgrade from Bootstrap2 to Bootstrap3. Everything works so far, except the Glyphicons: a square is displayed instead of the icon: <img src="https://i.stack.imgur.com/wksmb.png" alt="enter image description here"></p>
  
  <p>I'm using Symfony2. This is how I call Bootstrap CSS:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" /&gt;
  </code></pre>
  
  <p>This is how I call the glyphicons:</p>
  
  <pre><code>&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>My file structure is as follows:</p>
  
  <ul>
  <li>/web
  
  <ul>
  <li>/css
  
  <ul>
  <li>bootstrap.css</li>
  </ul></li>
  <li>/fonts
  
  <ul>
  <li>the 4 glyphicons files</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>It seems that this is a common problem (see <a href="https://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-not-working">this topic</a>, <a href="https://stackoverflow.com/questions/18205738/how-to-use-glyphicons-in-bootstrap-3-0">this topic</a> or <a href="https://stackoverflow.com/questions/18603355/twitter-bootstrap-3-icon-displaying-a-square/18777559">this topic</a> for example), but none of the solution found there solved my problem.</p>
  
  <p>I downloaded the files from bootstrap website, not from the customizer.
  Moreover, I made a test with the following file structure (in a complete different folder but with the same Bootstrap files), found on one of those topics:</p>
  
  <ul>
  <li>/test
  
  <ul>
  <li>/css
  
  <ul>
  <li>bootstrap.css</li>
  </ul></li>
  <li>/fonts
  
  <ul>
  <li>the 4 glyphicons files</li>
  </ul></li>
  <li>index.html</li>
  </ul></li>
  </ul>
  
  <p>Index.html beeing:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta chaset="utf-8"&gt;
      &lt;title&gt;Test icons&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button type="button" class="btn btn-default btn-lg"&gt;
          &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt; Star
      &lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this test works perfectly, so the glyphicons files are not corrupted.</p>
  
  <p>The charset of my real site is UTF-8 as well.</p>
  
  <p>I checked the bootstrap.css file and the glyphicons reference seems OK:</p>
  
  <pre><code>@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
  }
  
  .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
  }
  </code></pre>
  
  <p>So I guess the way I call the CSS "modifies" its path which is consequently different from the glyphicons path, which is the icons are not found.</p>
  
  <p>How should I call the CSS or modify the src: url('????????/glyphicons-halflings-regular.eot'); to have the proper link?</p>