CODEWITHSUNDEEP
cssruby-on-railsfonts
Luke
Luke

Reputation: 623

Rails Font-Awesome not displaying - Using wrong filenames

I have a rails app that uses Font-Awesome. The icons are displaying in Development environment but not in production.

I have checked my Nginx/Passenger logs and these show the following:

[21/Nov/2017:17:13:25 +0000] "GET /assets/back/font-awesome/fontawesome-webfont.ttf HTTP/1.1" 404 1564 "https://example.com/assets/application_back-b78b545bb6d96e3f98206780079663e7d84d11a41143a57b3ab7b110feac9944.css

I have checked in the public/assets/back/font-awesome/ directory and all the font files are showing like fontawesome-webfont-aa58f33f239a0fb02f5c7a6c45c043d7a9ac9a093335806694ecd6d4edc0d6a8.ttf which is why it cannot find the files but I don't know why it is doing this

Upvotes: 1

Views: 309

Answers (2)

Luke
Luke

Reputation: 623

I resolved this by refactoring the assets, converting the backend CSS to SCSS and changing the url(...) calls to font-url(...) Now it calls the files correctly.

Upvotes: 0

Justin Stone
Justin Stone

Reputation: 88

Rails asset pipeline adds a string the end of the filename so assets can be expired from caches when they are modified. Because of this, you need to use Rails built in url helpers to make sure you reference the correct filename.

In any ERB where you reference the Font Awesome fonts try using the asset-path helper:

@font-face {
  font-family: 'fontawesome-webfont';
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot#iefix") %>') 
  format('embedded-opentype'),
  url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'),
  url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype');
}

In your SASS files you can use the asset-url helper:

@font-face {
  font-family: 'fontawesome-webfont';
  src: asset-url("fontawesome-webfont.eot");
  src: asset-url("fontawesome-webfont.eot#iefix")
  format('embedded-opentype'),
  asset-url("fontawesome-webfont.woff") format('woff'),
  asset-url("fontawesome-webfont.ttf") format('truetype');
}

If you are just trying to reference the font awesome CSS file from one of your layouts, use the stylesheets helper:

stylesheet_link_tag "FILENAME-OF-YOUR-FA-STYLESHEET.css"

Here is some more reading on Rails asset pipeline and all the different helpers available: Rails Asset Pipline Docs

Upvotes: 1

Related Questions