how does $icon-font-path works in bootstrap scss?

guy mograbi picture guy mograbi · Oct 18, 2013 · Viewed 22.8k times · Source

I recently started using bootstrap SCSS on my node project. So I have app/bower_components/bootstrap-sass/lib/_glyphicons.scss for example.

Looking at my CSS output I see things like:

@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;
}

I have 2 questions:

  1. 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?
  2. How does it work? I nearly got it figured out, but I am missing something. Looking at the SCSS, I see bootstrap is using $icon-font-path which apparently turns into this absolute path. Looking at compass documentation, I see they provide absolute values but no $icon-font-path

This is the piece of code I am referring to:

@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');
}

Answer

guy mograbi picture guy mograbi · Nov 8, 2013

Both answers are correct. To sum it up, there's no magic. Bootstrap initializes $icon-font-path with a default value.

if you include bootstrap's SCSS in a manager that requires a different value for $icon-font-path you should also override their default value.

The syntax $icon-font-path: some_value !default; means - use this value if not already set.

So when you include you should do the following

/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts; 
@include bower_components/bootstrap/bootstrap.scss;

paths might be different in real scenarios.

This seems to be a standard mechanism for publishing a reusable SCSS modules.