I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets
, I have "font-awesome" containing both scss
and fonts
.
In
app/assets/stylesheets/application.scss
, I have included various files:
/*
* This manifest file will be compiled into application.css, including all listed files
* from directories like lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins.
*
* You can add application-wide styles here, but it's recommended to create separate files per style scope.
*
*= require_self
*= require_tree .
*= require style.scss
*= require chosen/chosen.min
*= require jquery.ui.all
*= require selectize.js/css/selectize.css
*= require selectize.js/css/selectize.bootstrap3.css
*= require font-awesome/scss/font-awesome
*/
While the page loads correctly, using "
<i class="fa-question></i>
" results in "[]", rather than the expected question mark. Upon checking the sources tab in Chrome, only the font-awesome.scss
is loaded under the "font-awesome" directory.
/*!
* Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";
It seems that while the CSS is loading correctly, the fonts are not. Checking the "variables" file, where the font path should be defined, reveals:
$fa-font-path: "../fonts" !default;
Considering the outlined directory structure, the fonts directory is indeed one level higher.
So, what could be causing this issue?