title: Bootstrap Icons not showing in published ASP.NET MVC application
body: <p>--- NB: Go to the EDITED 2 section for summary ----</p>
  
  <p>I have an ASP.NT MVC (4) application. I integrated (twitter)Bootstrap to it.
  Bootstrap is working perfectly, but the icons does not show correctly when I publish the application.</p>
  
  <p>I tried to republish the application without success.</p>
  
  <p>For clarify I put some images here below.</p>
  
  <p>When I run my application from VS2013 the result is this (which is OK):</p>
  
  <p><img src="https://i.stack.imgur.com/GoDL9.png" alt="Local Icons"></p>
  
  <p>In booth, IE and Chrome.</p>
  
  <p>But when I run the published application the result is this (which is NOT ok):</p>
  
  <ul>
  <li>Chrome</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/02cBg.png" alt="Published Chrome"></p>
  
  <ul>
  <li>IE (10)</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/CkfKN.png" alt="Published IE"></p>
  
  <p>This problem has, somehow, to be with the evaluated CSS but I don't know at which point this could be happening.</p>
  
  <p>The evaluated css in the local application are this (which is OK):</p>
  
  <ul>
  <li>Chrome</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/qpZ3M.png" alt="Local CSS Chrome"></p>
  
  <ul>
  <li>IE</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/zgkbp.png" alt="Local CSS IE"></p>
  
  <p>But In the published application I have this (which is NOT ok):</p>
  
  <ul>
  <li>Chrome:</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/85V3j.png" alt="Published CSS Chrome"></p>
  
  <ul>
  <li>IE:</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/x3DCk.png" alt="Publisehd CSS IE"></p>
  
  <p>Some has experienced this behavior?</p>
  
  <p>What can I do for solve this weird problem?</p>
  
  <p>--------------------------- EDITED ------------------------------</p>
  
  <p>I get the font files (<code>.eot</code>, <code>.svg</code>, <code>.ttf</code> and <code>.woff</code>) to be included when publishing my application.
  When I access the default page (application root <code>http://localhost/</code>) which is the page showing the icons the files being showed in the Chrome's Developper Tools Network tab are:</p>
  
  <p><img src="https://i.stack.imgur.com/SFgK5.png" alt="Network Tab"></p>
  
  <p>Before including the files I was getting 404 errors for the files, so I could guess they continue to be requested even if they are not showed in the Network Tab.</p>
  
  <p>Though, the icons are not showed correctly.</p>
  
  <p>------------------------ EDITED 2 ---------------------------</p>
  
  <p>Well, I restart my site in the IIS 7. And the request start to be triggered. These are the file requests showed in the Chrome's Developper Tools Network Tab:</p>
  
  <p><img src="https://i.stack.imgur.com/E14XH.png" alt="New Requested files"></p>
  
  <p>The resquest is then looking for the files in: <strong><code>/Content/themes/fonts/</code></strong> but they are in: <strong><code>/Content/themes/base/fonts/</code></strong></p>
  
  <p>The <code>base</code> folder containt a <code>bootstrap</code> folder which containt the <code>bootstrap.css</code> file. In the CSS file there are this class referening the fonts files:</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');
  }
  </code></pre>
  
  <p>It seems the references to the fonts files are good as the the files tree is this:</p>
  
  <p><img src="https://i.stack.imgur.com/GNA5D.png" alt="files tree"></p>
  
  <p>I could change the class to be:   </p>
  
  <pre><code>@font-face {
        font-family: 'Glyphicons Halflings';
        src: url('../base/fonts/glyphicons-halflings-regular.eot');
        src: url('../base/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../base/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../base/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../base/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
      }
  </code></pre>
  
  <p>But, I would actually know what this is happening and how to solve it!
  Besides, the icons will be showed in the published site but not in the local site (running from VS2013 with iisexpress).
  <strong>Thank you in advance for your help!</strong></p>