1

I am running a Rails 5.1.4 app in production mode. I am using Semantic UI as my css framework and have already ran RAILS_ENV=production rails assets:precompile to compile my assets and font files in the public/assets folder. When I load my website everything works except the icons are replaced by squares.

Here is my config/application.rb:

class Application < Rails::Application
  config.load_defaults 5.1

  config.assets.paths << Rails.root.join('semantic', 'dist')
  config.assets.precompile << 'themes/default/assets/fonts/*'
end

My Nginx file:

server {
    listen       80;
    server_name  atrium.michaelvasallo.com;
    passenger_enabled on;
    rails_env production;
    root /var/www/atrium/public;
}

As you can see Semantic UI is looking in themes/default/assets/fonts/ and that is where my icon files are located. They are all showing up in the public/assets folder when I precompile but they are not being served when the page is loaded.

Michael Vasallo
  • 11
  • 2
  • 1
    Check your browser console, it's likely that the fonts are being blocked because the browser wants extra cors headers for font files. – Camden Narzt Dec 06 '17 at 11:01

2 Answers2

0

Not a fix, but I found a better solution. In my semantic/src/site/globals/site.variables I set the font path to the Semantic UI CDN instead of fetching from local files.

@fontPath: 'https://cdn.jsdelivr.net/npm/semantic-ui@2.2.13/dist/themes/default/assets/fonts';
Michael Vasallo
  • 11
  • 2
0

I had the same problem in production, check this answer to see how I got it working.

In your case you probably need to add:

Rails.application.config.assets.paths << Rails.root.join('semantic', 'dist', 'themes', 'default')

in config/initializers/assets.rb

set @fontPath to:

@fontPath  : "assets/fonts";

and use font-url helper in icon.variables

/*******************************
             Icon
*******************************/

/*--------------
   Font Files
---------------*/
@fontName: 'icons';
@src:
  font-url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{fontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{fontName}.woff") format('woff'),
  font-url("@{fontPath}/@{fontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{fontName}.svg#icons") format('svg')
;
@fallbackSRC: font-url("@{fontPath}/@{fontName}.eot");

/*--------------
 Optional Files
---------------*/

/* Outline Icons */
@importOutlineIcons: true;
@outlineFontName: 'outline-icons';
@outlineSrc:
  font-url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{outlineFontName}.woff") format('woff'),
  font-url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg')
;
@outlineFallbackSRC: font-url("@{fontPath}/@{outlineFontName}.eot");

/* Brand Icons */
@importBrandIcons: true;
@brandFontName: 'brand-icons';
@brandSrc:
  font-url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{brandFontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{brandFontName}.woff") format('woff'),
  font-url("@{fontPath}/@{brandFontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{brandFontName}.svg#icons") format('svg')
;
@brandFallbackSRC: font-url("@{fontPath}/@{brandFontName}.eot");
Wally
  • 61
  • 6