title: Twitter bootstrap icons don't show up - what am i doing wrong?
body: <p>i'm a newbie, so please help ;-)</p>
  
  <p>I build a small RoR web application where i'm trying to use the twitter bootstrap.js framework.</p>
  
  <p>i got almost everything to work but showing the icons which should be coming glyphicons-halflings-white.png or glyphicons-halflings.png .</p>
  
  <p>my folders structure is pretty simple, the standard RoR project, where i put the png files under /app/assets/images/, and when i take a look on the bootstrap.css files i see:</p>
  
  <pre><code>background-image: url("../images/glyphicons-halflings-white.png");
  </code></pre>
  
  <p>and</p>
  
  <pre><code>background-image: url("../images/glyphicons-halflings.png");
  </code></pre>
  
  <p>which should be correct according to my folder structure.</p>
  
  <p>In my html code i have something like that:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button class="btn" id="addTagButton"&gt;&lt;i class="icon-tag"&gt;&lt;/i&gt;Add Tag&lt;/button&gt;
      &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where i use the <code>&lt;i class="icon-tag"&gt;&lt;/i&gt;</code> to show a tag icon (or hope to see it)</p>
  
  <p><strong>Though, nothing is working</strong></p>
  
  <p>for unknown reason, i can't see any icons on my folder. i was trying to see if i can see the png files if i simple copy the <code>../images/glyphicons-halflings.png</code> to the browser address url, though, i get "No route matches [GET] "/images/glyphicons-halflings.png" when the url points to: localhost:3000/images/glyphicons-halflings.png</p>
  
  <p>my html response looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/jquery-ui.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
    &lt;script src="/assets/jquery.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery.min.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery_ujs.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery-ui.1.8.20.min.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery.extentions.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/application.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/select2.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" /&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
    &lt;meta content="authenticity_token" name="csrf-param" /&gt;
  &lt;meta content="c+czIHCNmepmx674gKldijipFRD9348Gw+R2SAlrpow=" name="csrf-token" /&gt;
    &lt;link rel="SHORTCUT ICON" href="/images/favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="/assets/jquery.validate.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jit-yc.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/graphcontrol.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/excanvas.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;!--[if IE]&gt;&lt;script language="javascript" type="text/javascript" src="/assets/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
  &lt;h1&gt;Sandbox#hello&lt;/h1&gt;
  
  &lt;div class="btn-group"&gt;
      &lt;button class="btn" id="addTagButton"&gt;&lt;i class="icon-tag"&gt;&lt;/i&gt;Add Tag&lt;/button&gt;
      &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  
  &lt;script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-button.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('.dropdown-toggle').dropdown();
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Am i doing anything wrong? do i need to force ruby to deploy those *.png files correctly?</p>
  
  <p>Any advise would be helpful.</p>