CODEWITHSUNDEEP
cssfontscompassbootstrap-sass
Green
Green

Reputation: 30855

How to deal with fonts in bootstrap-sass and compass? How to include fonts on the page correctly?

In my Node.js app I use bootstrap-sass and Compass. Not gulp-compass and tasks, but exactly Compass, I have Compass' config.rb file in app's root dir. I compile my assets with these commands:

$ compass watch
$ compass compile

And I don't understand how to include bootstrap's fonts on the page to enable glyphicons. Fonts are stored in bower_components\bootstrap-sass\assets\fonts\bootstrap. Bootstrap-sass variables for fonts are as follows:

$bootstrap-sass-asset-helper: false !default;

//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.

// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
// $icon-font-path: 'fonts/';

//** File name for all font files.
$icon-font-name:          "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id:        "glyphicons_halflingsregular" !default;

And Compass compiles it into this css:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");
  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

And I don't have Glyphicons on the page because fonts are now found in ../fonts/bootstrap/glyphicons-halflings-regular.eot.

How to deal with fonts? Do I have to manually move fonts from 

bower_components\bootstrap-sass\assets\fonts\bootstrap

to my

public/css/fonts

this is where my compiled assets live and where a server fetches them from. And this is what I do now - I manually moved fronts to public/css/fonts and had to manually type different @font-face:

@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.woff2") format("woff2"), 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");
}

But is it the right way? Then why Compass is needed if I have to manually deal with fonts and paths?

There are several Compass options for fonts in config.rb. How to use them to make Compass care about fonts and paths? I tried these options but it seems they do not work, I didn't noticed any changes in scss => css compilation, whatever I set them. And documentation is quite miserable.

fonts_dir =
fonts_path =
http_fonts_path =
http_fonts_dir =

Upvotes: 1

Views: 6739

Answers (1)

Ben Edwards
Ben Edwards

Reputation: 168

I think you may well find your answer here Bootstrap - Sass: relative glyphicons icon path

The TLDR version is that you should try uncommenting the relative_assets line from your config.rb

Upvotes: 1

Related Questions