title: how does $icon-font-path works in bootstrap scss?
body: <p>I recently started using bootstrap SCSS on my node project. So I have <code>app/bower_components/bootstrap-sass/lib/_glyphicons.scss</code> for example.</p>
  
  <p>Looking at my CSS output I see things like:</p>
  
  <pre><code>@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
  audio,
  canvas,
  video {
    display: inline-block;
  }
  </code></pre>
  
  <p>I have 2 questions: </p>
  
  <ol>
  <li>This seems like a security hole. Everyone can deduce something about my OS and directory structure simply by looking at my CSS. What is the correct way to close this security hole? </li>
  <li>How does it work? I nearly got it figured out, but I am missing something. Looking at the SCSS, I see bootstrap is using <code>$icon-font-path</code> which apparently turns into this absolute path. Looking at <a href="http://compass-style.org/help/tutorials/configuration-reference/" rel="nofollow">compass documentation</a>, I see they provide absolute values but no <code>$icon-font-path</code></li>
  </ol>
  
  <p>This is the piece of code I am referring to:</p>
  
  <pre><code>@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('#{$icon-font-path}#{$icon-font-name}.eot');
    src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
         url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
         url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
         url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
  }
  </code></pre>