Rails 4 - vendor assets fonts file - css

Question

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

Answer 1

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