CODEWITHSUNDEEP
htmlcssruby-on-railsfontsfont-awesome
user3379926
user3379926

Reputation: 3945

Font Awesome Fonts not loading?

I have a rails app, and to manage my assets I am using bower. I prefer to not use gems for assets like JS and CSS if possible.

In my vender/assets/stylesheets directory I have the following: font-awesome in there is scss and fonts.

in my rails app/assets/stylesheets/application.scss I have the following:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file 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
 */

The page loads fine. But then when I do: <i class="fa-question></i> instead of getting a question mark I get a []. So I checked the sources tab in chrome to see whats being loaded, and under the font-awesome directory its just the font-awesome.scss, upon looking in there I see:

/*!
 *  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";

So I feel confident to say that this is loading the css, but the fonts are not being loaded. So I looked in variables, where the font path would be defined and see:

$fa-font-path:        "../fonts" !default;

And based on the directory structure outlined above, the fonts directory is indeed one directory up.

So, what is going on?

Upvotes: 1

Views: 1403

Answers (2)

Nick Coad
Nick Coad

Reputation: 3694

For the record, the actual error here is that you're not assigning the "fa" class.

Instead of:

<i class="fa-question"></i>

You need:

<i class="fa fa-question"></i>

Upvotes: 2

Jelle
Jelle

Reputation: 339

i experienced similar issues and fixed it by using the following css file:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

I can't recall what went wrong, just hope this helps.

Upvotes: 2

Related Questions