Search code examples
cssruby-on-railstwitter-bootstrapasset-pipelinevendor

Rails 4 - vendor assets fonts file


I'm having trouble figuring out how to integrate a wrap bootstrap file into my rails 4 app.

I have a folder in my vendor assets called fonts.

In it I have several files on is called the following:

ActionController::RoutingError (No route matches [GET] "/assets/vendor/assets/fonts/Simple-Line-Icons.woff"):

I my vendor/assets/stylesheets, I have a file called simple-line-icons.css, which has:

@font-face {
    font-family: 'Simple-Line-Icons';
    src:url('vendor/assets/fonts/Simple-Line-Icons.eot');
    src:url('vendor/assets/fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
        url('vendor/assets/fonts/Simple-Line-Icons.woff') format('woff'),
        url('vendor/assets/fonts/Simple-Line-Icons.ttf') format('truetype'),
        url('vendor/assets/fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

When i save everything, and precompile assets, my console error log shows:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.ttf Failed to load resource: the server responded with a status of 404 (Not Found)

Can anyone see what needs to happen to get this to work?

Taking the suggestion below, I now have:

@font-face {
    font-family: 'Simple-Line-Icons';
    /*src:url('vendor/assets/fonts/Simple-Line-Icons.eot');*/
    src:asset-url("fonts/Simple-Line-Icons.eot");
    src:asset-url("fonts/Simple-Line-Icons.eot?#iefix") format('embedded-opentype'),
    asset-url("fonts/Simple-Line-Icons.woff") format('woff'),
    asset-url("fonts/Simple-Line-Icons.ttf") format('truetype'),
    asset-url("fonts/Simple-Line-Icons.svg#Simple-Line-Icons") format('svg');

inside simple-line-icons.css.erb

but i still get 404 error


Solution

  • add .erb to the end of your css file, then change url('vendor/assets/fonts/Simple-Line-Icons.eot') to asset-url("fonts/Simple-Line-Icons.eot") and same as the others. I think the problem is after you precompile the file, rails will add a random token to the file such as "/assets/application-908e25f4bf641868d8683022a5b62f54.js", so if you are using 'vendor/assets/fonts/Simple-Line-Icons.eot', you cannot find the file.

    update

    change your simple-line-icons.css.erb file to simple-line-icons.scss then

    @font-face {
      font-family: 'simple-line-icons';
      src: asset-url('Simple-Line-Icons.eot?v=2.2.2');
      src: asset-url('Simple-Line-Icons.eot?v=2.2.2#iefix') format('embedded-opentype'), asset-url('Simple-Line-Icons.ttf?v=2.2.2') format('truetype'), asset-url('Simple-Line-Icons.woff2?v=2.2.2') format('woff2'), asset-url('Simple-Line-Icons.woff?v=2.2.2') format('woff'), asset-url('Simple-Line-Icons.svg?v=2.2.2#simple-line-icons') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    

    at the end in your application.css file add the following:

    *= require simple-line-icons
    

    because apparently require_tree . will not require the file in your vendor and lib folder