Within my Node.js application, I utilize bootstrap-sass in conjunction with Compass. Omitting the use of gulp-compass and related tasks, specifically relying on Compass itself, I have placed the Compass config.rb file in the root directory of my app. To compile assets, I execute the following commands:
$ compass watch
$ compass compile
The confusion arises when attempting to incorporate Bootstrap's fonts into the page to enable glyphicons. These fonts are located at
bower_components\bootstrap-sass\assets\fonts\bootstrapBootstrap-sass 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;
Upon compilation by Compass, the CSS output includes the following:
@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");
}
However, due to the changed font path (
../fonts/bootstrap/glyphicons-halflings-regular.eotWhat is the recommended approach for dealing with these fonts? Should I manually relocate them from
bower_components\bootstrap-sass\assets\fonts\bootstrap
to
public/css/fonts
This directory is where the compiled assets are stored and accessed by the server. Currently, my workaround involves a manual transfer of fonts to public/css/fonts, requiring me to adjust the @font-face declarations accordingly:
@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");
}
Questioning the necessity of Compass if manual handling of fonts and paths is prevalent, I wonder about utilizing the font-related options within the config.rb file provided by Compass. Despite experimenting with these settings, no discernible changes occurred during the SCSS to CSS compilation process. The documentation proved insufficient in clarifying how these options should be implemented.
fonts_dir =
fonts_path =
http_fonts_path =
http_fonts_dir =