title: Bootstrap - Sass: relative glyphicons icon path
body: <p>How do I set a relative glyphicons icon path in bootstrap sass version?</p>
  
  <p>By default, the path used in the css font-face is an absolute one. </p>
  
  <pre><code>@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(/fonts/bootstrap/glyphicons-halflings-regular.eot?1422262129);
    src: url(/fonts/bootstrap/glyphicons-halflings-regular.eot?&amp;1422262129#iefix) format("embedded-opentype"), url(/fonts/bootstrap/glyphicons-halflings-regular.woff2?1422262129) format("woff2"), url(/fonts/bootstrap/glyphicons-halflings-regular.woff?1422262129) format("woff"), url(/fonts/bootstrap/glyphicons-halflings-regular.ttf?1422262129) format("truetype"), url(/fonts/bootstrap/glyphicons-halflings-regular.svg?1422262129#glyphicons_halflingsregular) format("svg");
  }
  </code></pre>
  
  <p>But I need a relative one: "../fonts/bootstrap" - so in file _bootstrap-variables.scss, I set the $icon-font-path</p>
  
  <pre><code>$icon-font-path: "../fonts/bootstrap/"
  </code></pre>
  
  <p>which gives the following</p>
  
  <pre><code>@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.eot?1422262129);
    src: url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.eot?&amp;1422262129#iefix) format("embedded-opentype"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.woff2?1422262129) format("woff2"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.woff?1422262129) format("woff"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.ttf?1422262129) format("truetype"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.svg?1422262129#glyphicons_halflingsregular) format("svg");
  }
  </code></pre>
  
  <p>In the web I found the tip to inlcude "bootstrap-sprockets" before the variables, the result is</p>
  
  <pre><code>@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.eot"));
    src: url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix")) format("embedded-opentype"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.woff2")) format("woff2"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.woff")) format("woff"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.ttf")) format("truetype"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular")) format("svg");
  }
  </code></pre>
  
  <p>The url itself seems ok - but where does this "font-path" come from, how do I get rid of it? </p>
  
  <p>Or is there another way to specify a relative path? What am I getting wrong?</p>