CODEWITHSUNDEEP
ruby-on-railswebpackfont-awesomeruby-on-rails-6
Max Kirsch
Max Kirsch

Reputation: 461

Rails 6 Font Awesome 5 Production Issue

I have a REALLY strange problem with my Rails 6 application in production mode. I deployed a new version without changing anything for webpacker and suddenly my Font Awesome 5 Icons are not loading anymore. I tried EVERYTHING that I could think of but nothing works. In development, my Icons are loading without problems, no errors are displayed. Then if I deploy my app with Capistrano everything works, but the icon won't display.

# application.scss
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

# application.js
import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all";

I don't know a few days ago everything worked fine, my icons were showing in development and production environment and suddenly, I can do what I want, it's broken:

enter image description here

I don't know how I got this error, I'm using Phusion Passenger with NGINX, but changed nothing on the config. I made sure the webfonts are present in the right folder, but I keep getting this error. I don't know why the connection should be refused, the other webfonts that are present are available it seems.

EDIT: I tried to clear my browser cache, I tried ipconfig /flushdns and I tested it on my mobile phone etc, everywhere I get the same error.

EDIT2: If I delete the fonts from the packs director, I get the following error:

Access to font at 'http://localhost:3000/packs/media/webfonts/fa-solid-900-f6121be5.woff2' from origin 'http://webmenue2019.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

EDIT3: I noticed while digging in Chrome that those webfonts are being loaded from localhost:3000! But why?

enter image description here

Upvotes: 3

Views: 1412

Answers (1)

AAzizH
AAzizH

Reputation: 143

i have the same problem too, my fixes was i removed all font awesome @import in application.scss and add this to my application.js:

import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all";

Upvotes: 4

Related Questions